Yet another animated CSS preloader

HTML
<div class="hoja">Wait 4 it...</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); html, body { height: 100%; } body { background: #fffff4; overflow: hidden; } .hoja { color: #dcdce2; position: absolute; top: 45%; left: 50%; margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; text-align: center; font-family: 'Open Sans', sans-serif; font-size: 35px; line-height: 280px; -webkit-font-smoothing: antialiased; } .hoja:after, .hoja:before { content: ""; border-radius: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; } .hoja:after { box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.6), inset 17.5px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17.5px 0 rgba(250, 150, 0, 0.6), inset -17.5px 0 0 rgba(250, 100, 0, 0.6); animation: rotar 2s linear infinite; } .hoja:before { box-shadow: inset 0 17.5px 0 rgba(0, 250, 250, 0.6), inset 17.5px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17.5px 0 rgba(0, 150, 200, 0.6), inset -17.5px 0 0 rgba(0, 200, 250, 0.6); animation: rotarIz 2s linear infinite; } @keyframes rotar { 0% { transform: rotatez(0deg) scalex(1) scaley(1); } 50% { transform: rotatez(180deg) scalex(0.82) scaley(0.95); } 100% { transform: rotatez(360deg) scalex(1) scaley(1); } } @keyframes rotarIz { 0% { transform: rotatez(0deg) scalex(1) scaley(1); } 50% { transform: rotatez(-180deg) scalex(0.95) scaley(0.85); } 100% { transform: rotatez(-360deg) scalex(1) scaley(1); } }
JAVASCRIPT
Expand for more options Login