Simple Loader in CSS

An article by admin    No Comments

Today I am writing this article to create a very simple loader in CSS. I am using the css keyframe animation to create loader. You can see the demo below:...

Today I am writing this article to create a very simple loader in CSS. I am using the css keyframe animation to create loader.

You can see the demo below:

CSS code can be seen below:

.loader {
    text-align: center;
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 10px;
    margin: 50px auto;
    background: black;
    -webkit-animation: loader 0.6s infinite alternate;
    -moz-animation: loader 0.6s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 5px;
    height: 10px;
    opacity: 0.9;
      }
  100% {
    width: 5px;
    height: 15px;
    opacity: 0.1;
      }
}
@-moz-keyframes loader {
  0% {
    width: 5px;
    height: 10px;
    opacity: 0.9;
      }
  100% {
    width: 5px;
    height: 15px;
    opacity: 0.1;
      }
}