Hue Loaders

HTML
<div class="loader"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> </div>
CSS
.loader { position:fixed; left:0; right:0; top:0; bottom:0; filter:hue-rotate(0deg); background:linear-gradient(45deg,#0f8,#08f); animation:hue 10000ms infinite linear; } .loader .b1 { left:42%; } .loader .b2 { left:50%; animation-delay:100ms; } .loader .b3 { left:58%; animation-delay:200ms } .loader .b1, .loader .b2, .loader .b3 { width:10px; height:30px; background-color:rgba(256,256,256,0.8); position:absolute; top:50%; transform:rotate(0); animation-name:spinify; animation-duration:1600ms; animation-iteration-count:infinite; } @keyframes spinify { 0% { transform: translate(0px,0px); } 33% { transform: translate(0px,24px); border-radius:100%; width:10px; height:10px; } 66% { transform:translate(0px,-16px); } 88% { transform:translate(0px,4px); } 100% { transform:translate(0px,0px); } } @keyframes hue{ 0%{filter: hue-rotate(0deg);} 100%{filter:hue-rotate(360deg);} }
JAVASCRIPT
Expand for more options Login