<div id="preloader_1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
*{font-family: arial; font-size:14px} p{color:#fff} body{ background:#000;} #preloader_1{ position:relative; margin:10% 30%; } #preloader_1 span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; -webkit-animation: preloader_1 1.5s infinite ease-in-out; animation: preloader_1 1.5s infinite ease-in-out; } #preloader_1 span:nth-child(2){ left:11px; -webkit-animation-delay: .2s; animation-delay: .2s; } #preloader_1 span:nth-child(3){ left:22px; -webkit-animation-delay: .4s; animation-delay: .4s; } #preloader_1 span:nth-child(4){ left:33px; -webkit-animation-delay: .6s; animation-delay: .6s; } #preloader_1 span:nth-child(5){ left:44px; -webkit-animation-delay: .8s; animation-delay: .8s; } @-webkit-keyframes preloader_1 { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} } @keyframes preloader_1 { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} }