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