CSS - Bouncing balls. : Penny Junction Pty Ltd.
PHOTO BY Penny Junction Pty Ltd.

CSS - Bouncing balls

Written by MH in Experimental Playground for SORSO
Published Sun. 25th of Mar 2018 URL CSS - Bouncing balls

A small and rather simple piece of HTML and CSS code creates a bouncing loader animation. Both visually pleasing and small in terms of size. Works in any modern browser.

HTML

<div class="bounce">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bounce {from {opacity: 1;transform: translateY(0);}to {opacity: 0.1;transform: translateY(-1rem);}}
.bounce {display: flex;justify-content: center;}
.bounce > div {width: 1rem;height: 1rem;margin: 3rem 0.2rem;background: #8385aa;border-radius: 50%;animation: bouncing-loader 0.6s infinite alternate;}
.bounce > div:nth-child(2) {animation-delay: 0.2s;}
.bounce > div:nth-child(3) {animation-delay: 0.4s;}

Result

 
 
 

Tag