loader

by Mohammed Fayoumi

HTML

<div class="loader">
	<span></span>
	<span></span>
	<span></span>
  <span></span>
</div>

CSS

.loader {
			    text-align: center;    
			}
			.loader span {
			    display: inline-block;
			    width: 5px;
			    height: 5px;
			    margin: 50px auto;
			    background: red;
			    border-radius: 50%;
			    -webkit-animation: loader 1.2s infinite alternate;
			    -moz-animation: loader 1.2s 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;
			}
      .loader span:nth-of-type(4) {
			    -webkit-animation-delay: 0.9s;
			    -moz-animation-delay: 0.9s;
			}
			@-webkit-keyframes loader {
			  0% {
			    width: 5px;
			    height: 5px;
			    opacity: 0.9;
			    -webkit-transform: translateY(0);
			  }
			  100% {
			    width: 10px;
			    height: 10px;
			    opacity: 0.1;
			    -webkit-transform: translateY(-10px);
			  }
			}