simple css loading – bar animation

I just try some loader animation with css3 look like ,

The bar is <div> with the class of barLoader and barFlying keyframes. You can use hide and show this animation when you want to show it.

CSS :

.barLoader, .barLoader:after, .barLoader:before {
  display: inline-block;
  position: relative;
  width: 5px;
  height: 50px;
  border-radius: 1000px;
  background: #2196F3;
  margin-top: 5px;
  animation: barFlying2 0.5s ease infinite;
  animation-direction: alternate;
  animation-delay: .25s;
}
.barLoader:after, .barLoader:before {
  position: absolute;
  content: '';
  animation: barFlying 0.5s ease infinite;
  animation-direction: alternate;
}
.barLoader:before {
  left: -10px;
  animation-delay: 1s;
}
.barLoader:after {
  left: 10px;
  animation-delay: 1s;
}

KEYFRAMES :

@keyframes barFlying {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(-20px);
  }
}
@keyframes barFlying2 {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(-20px);
  }
}

HTML :

<div class="barLoader"></div>

Result :

Leave a Reply

Your email address will not be published. Required fields are marked *