After seeing some example of CSS 3 animating “AJAX Loaders” on another site (I think sitepoint.com) I thought it would be fun to make some of my own.
These “AJAX Loaders” are completely styled and animated with CSS 3. They take advantage of new CSS 3 properties like animation, keyframe, and transform so they won’t work in older browsers like I.E. 9-6. If you need fallback support for older browsers I’d recommend using modernizr to check for browsers that don’t support CSS 3 animations and fall back to an animated GIF for those browsers. You can find more information on how to use modernizr for fallbacks here: http://modernizr.com/docs/#features-css
If you need animated GIFs for your fallback you can find a great generator here: http://www.ajaxload.info/ One of the GIFs was the inspiration for the Pac-man example below.
Follow the Page links below to see more examples.
Pac-man CSS 3 Animation AJAX Loader
Note: For some reason Opera won’t animate the mouth in this one. I’m not sure why.
Here’s the HTML for this example
<div id="loader5wrapper">
<div id="loader5">
<span></span>
<span></span>
</div>
<div id="loader5pellets">
<span></span>
<span></span>
<span></span>
<span class="ghost">
<span>
<span></span>
<span></span>
<span></span>
</span>
</span>
<span></span>
<span></span>
<span></span>
<span class="ghost">
<span>
<span></span>
<span></span>
<span></span>
</span>
</span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> |
Here’s the CSS for this example
#loader5wrapper{ margin: 100px 0 0 50px; width: 300px; height: 100px; overflow: hidden; position: relative; } #loader5{ clear: both; height: 100px; width: 100px; position: relative; } #loader5 span:nth-child(1){ background: #000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%; display: block; } #loader5 span:nth-child(2){ background: #fff; width: 95%; height: 95%; position: absolute; top: 3%; left: 65%; -webkit-animation: scaleHeight 1s ease-out infinite; -moz-animation: scaleHeight 1s ease-out infinite; -ms-animation: scaleHeight 1s ease-out infinite; -o-animation: scaleHeight 1s ease-out infinite; animation: scaleHeight 1s ease-out infinite; } #loader5pellets{ position: absolute; top: 0; left: 5%; height: 100px; width:1000px; overflow: hidden; } #loader5pellets > span{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; display: block; float: left; background: #000; margin: 40px 25px 0 0; -webkit-animation: movePellets 2s linear infinite; -moz-animation: movePellets 2s linear infinite; -ms-animation: movePellets 2s linear infinite; -o-animation: movePellets 2s linear infinite; animation: movePellets 2s linear infinite; } #loader5pellets span.ghost{ width: 40px; height: 65px; margin: 25px 25px 25px 0; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; position: relative; overflow: hidden; } #loader5pellets span.ghost > span:first-child{ background: #000; display: block; width: 40px; margin: 0 auto; height: 35px; -webkit-border-radius: 50% 50% 2px 2px; -moz-border-radius: 50% 50% 2px 2px; border-radius: 50% 50% 2px 2px; position: absolute; top: 0; left: 0; } #loader5pellets span.ghost span span{ width: 18px; height:18px; display: block; background: #000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; bottom: -9px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #loader5pellets span.ghost span span:first-child{ left:-8px; } #loader5pellets span.ghost span span:nth-child(2){ left:11px; } #loader5pellets span.ghost span span:last-child{ right:-8px; } @-webkit-keyframes scaleHeight{ 0%{ -webkit-transform: scaleY(0) rotate(45deg); } 50%{ -webkit-transform: scaleY(1) rotate(45deg); } 100%{ -webkit-transform: scaleY(0) rotate(45deg); } } @-moz-keyframes scaleHeight{ 0%{ -moz-transform: scaleY(0) rotate(45deg); } 50%{ -moz-transform: scaleY(1) rotate(45deg); } 100%{ -moz-transform: scaleY(0) rotate(45deg); } } @-o-keyframes scaleHeight{ 0%{ -o-transform: scaleY(0) rotate(45deg); } 50%{ -o-transform: scaleY(1) rotate(45deg); } 100%{ -o-transform: scaleY(0) rotate(45deg); } } @keyframes scaleHeight{ 0%{ transform: scaleY(0) rotate(45deg); } 50%{ transform: scaleY(1) rotate(45deg); } 100%{ transform: scaleY(0) rotate(45deg); } } @-webkit-keyframes movePellets { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(-200px); } } @-moz-keyframes movePellets { 0% { -moz-transform: translateX(0); } 100% { -moz-transform: translateX(-200px); } } @-o-keyframes movePellets { 0% { -o-transform: translateX(0); } 100% { -o-transform: translateX(-200px); } } @keyframes movePellets { 0% { transform: translateX(0); } 100% { transform: translateX(-200px); } } |