Simple CSS Loaders With Animations - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class="container"> <div class="loader_back"> <div class="loader yellow"></div> </div> <div class="loader_back"> <div class="loader orange"></div> </div> <div class="loader_back"> <div class="loader red"></div> </div> <div class="loader_back"> <div class="loader pink"></div> </div> <div class="loader_back"> <div class="loader pink"></div> </div> <div class="loader_back"> <div class="loader violet"></div> </div> <div class="loader_back"> <div class="loader blue"></div> </div> <div class="loader_back"> <div class="loader green"></div> </div> </div>

body { font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif; font-size: 13px; } .container { width: 450px; margin: 40px auto; overflow: hidden; } .loader_back { width: 66px; height: 66px; padding: 10px; color: #fff; font-weight: bold; text-align: center; background: #000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; float: left; margin: 10px; } .loader { width: 50px; height: 50px; border-right: 8px solid #4D4D4D; border-bottom: 8px solid #4D4D4D; margin: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: rotate 2s infinite linear; -moz-animation: rotate 2s infinite linear; -ms-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; } .loader.yellow { border-left: 8px solid #CCC366; border-top: 8px solid #CCC366; } .loader.orange { border-left: 8px solid #CC8F66; border-top: 8px solid #CC8F66; } .loader.red { border-left: 8px solid #CC6866; border-top: 8px solid #CC6866; } .loader.pink { border-left: 8px solid #CC66C3; border-top: 8px solid #CC66C3; } .loader.violet { border-left: 8px solid #A366CC; border-top: 8px solid #A366CC; } .loader.blue { border-left: 8px solid #6670CC; border-top: 8px solid #6670CC; } .loader.green { border-left: 8px solid #66CC74; border-top: 8px solid #66CC74; } @-webkit-keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-ms-keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }

Tutorials Palace 17 December, 2018 No Comments

166 Views