CSS3 Loading Animation - 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

<ul id="progress"> <li> <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect --> <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect --> </li> <li> <div id="layer2" class="ball"></div> <div id="layer8" class="pulse"></div> </li> <li> <div id="layer3" class="ball"></div> <div id="layer9" class="pulse"></div> </li> <li> <div id="layer4" class="ball"></div> <div id="layer10" class="pulse"></div> </li> <li> <div id="layer5" class="ball"></div> <div id="layer11" class="pulse"></div> </li> </ul> <div id="content"> <span class="expand"></span> </div> <ul id="loadbar"> <li> <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar --> </li> <li> <div id="layerFill2" class="bar"></div> </li> <li> <div id="layerFill3" class="bar"></div> </li> <li> <div id="layerFill4" class="bar"></div> </li> <li> <div id="layerFill5" class="bar"></div> </li> <li> <div id="layerFill6" class="bar"></div> </li> <li> <div id="layerFill7" class="bar"></div> </li> <li> <div id="layerFill8" class="bar"></div> </li> <li> <div id="layerFill9" class="bar"></div> </li> <li> <div id="layerFill10" class="bar"></div> </li> </ul>

/* PROGRESS BAR ================================================== */ body { background: #222; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Helvetica, Arial; font-size: 75%; } /* ********************************* ================================================== */ /* ********************************* ================================================== */ ul#progress { list-style: none; width: 125px; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; } ul#progress li { /* Style your list */ float: left; position: relative; width: 15px; height: 15px; border: 1px solid #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin-left: 10px; border-left: 1px solid #111; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; background: #000; } ul#progress li:first-child { margin-left: 0 } some_nowhitespace { nowhitespace: afterproperty } /* ===[ Remove the margin first li element ]=== */ .ball { /* Style your ball and set the animation */ background-color: #2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); width: 15px; height: 15px; border-radius: 50px; -moz-transform: scale(); -webkit-transform: scale(); -ms-transform: scale(); -o-transform: scale(); transform: scale(); -moz-animation: loading 1s linear forwards; -webkit-animation: loading 1s linear forwards; -ms-animation: loading 1s linear forwards; animation: loading 1s linear forwards; } .pulse { /* Style your second ball to create the amazing effects */ width: 15px; height: 15px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 1px solid #00c6ff; box-shadow: 0 0 5px #00c6ff; position: absolute; top: -1px; left: -1px; -moz-transform: scale(); -webkit-transform: scale(); -ms-transform: scale(); -o-transform: scale(); transform: scale(); -webkit-animation: pulse 1s ease-out; -moz-animation: pulse 1s ease-out; -ms-animation: pulse 1s ease-out; animation: pulse 1s ease-out; } /* ===[ Control Layers ]=== */ #layer1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -ms-animation-delay: 0.5s; animation-delay: 0.5s; } #layer2 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } #layer3 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; } #layer4 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } #layer5 { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } #layer7 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; } #layer8 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } #layer9 { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } #layer10 { -moz-animation-delay: 3s; -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } #layer11 { -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -ms-animation-delay: 3.5s; animation-delay: 3.5s; } @-moz-keyframes loading { 0% { -moz-transform: scale(0,0) } 100% { -moz-transform: scale(1,1) } } @-webkit-keyframes loading { 0% { -webkit-transform: scale(0,0) } 100% { -webkit-transform: scale(1,1) } } @-ms-keyframes loading { 0% { -ms-transform: scale(0,0) } 100% { -ms-transform: scale(1,1) } } @keyframes loading { 0% { transform: scale(0,0) } 100% { transform: scale(1,1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(); opacity: 0; } 10% { -moz-transform: scale(1); opacity: 0.5; } 50% { -moz-transform: scale(1.75); opacity: 0; } 100% { -moz-transform: scale(); opacity: 0; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(); opacity: 0; } 10% { -webkit-transform: scale(1); opacity: 0.5; } 50% { -webkit-transform: scale(1.75); opacity: 0; } 100% { -webkit-transform: scale(); opacity: 0; } } @-ms-keyframes pulse { 0% { -ms-transform: scale(); opacity: 0; } 10% { -ms-transform: scale(1); opacity: 0.5; } 50% { -ms-transform: scale(1.75); opacity: 0; } 100% { -ms-transform: scale(); opacity: 0; } } @keyframes pulse { 0% { transform: scale(); opacity: 0; } 10% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(); opacity: 0; } } /* ********************************* ================================================== */ /* ********************************* ================================================== */ #content { width: 100%; /* Full Width */ height: 5px; margin: 50px auto; background: #000; } .expand { width: 100%; height: 1px; margin: 2px 0; background: #2187e7; position: absolute; -webkit-box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); -moz-box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7); -moz-animation: fullexpand 10s ease-out; -webkit-animation: fullexpand 10s ease-out; -ms-animation: fullexpand 10s ease-out; animation: fullexpand 10s ease-out; } /* ===[ Full Width Animation Bar ]=== */ @-moz-keyframes fullexpand { 0% { width: 0px } 100% { width: 100% } } @-webkit-keyframes fullexpand { 0% { width: 0px } 100% { width: 100% } } @-ms-keyframes fullexpand { 0% { width: 0px } 100% { width: 100% } } @keyframes fullexpand { 0% { width: 0px } 100% { width: 100% } } /* ********************************* ================================================== */ /* ********************************* ================================================== */ ul#loadbar { list-style: none; width: 140px; margin: 0 auto; padding-top: 50px; padding-bottom: 75px; } ul#loadbar li { float: left; position: relative; width: 11px; height: 26px; margin-left: 1px; border-left: 1px solid #111; border-top: 1px solid #111; border-right: 1px solid #333; border-bottom: 1px solid #333; background: #000; } ul#loadbar li:first-child { margin-left: 0 } .bar { background-color: #2187e7; background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -ms-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -o-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: linear-gradient(45deg, #2187e7 25%, #a0eaff); width: 11px; height: 26px; opacity: 0; -webkit-animation: fill .5s linear forwards; -moz-animation: fill .5s linear forwards; -ms-animation: fill .5s linear forwards; animation: fill .5s linear forwards; } #layerFill1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -ms-animation-delay: 0.5s; animation-delay: 0.5s; } #layerFill2 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } #layerFill3 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; } #layerFill4 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } #layerFill5 { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } #layerFill6 { -moz-animation-delay: 3s; -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } #layerFill7 { -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -ms-animation-delay: 3.5s; animation-delay: 3.5s; } #layerFill8 { -moz-animation-delay: 4s; -webkit-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } #layerFill9 { -moz-animation-delay: 4.5s; -webkit-animation-delay: 4.5s; -ms-animation-delay: 4.5s; animation-delay: 4.5s; } #layerFill10 { -moz-animation-delay: 5s; -webkit-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; } @-moz-keyframes fill { 0% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fill { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-keyframes fill { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fill { 0% { opacity: 0 } 100% { opacity: 1 } }

Tutorials Palace 7 August, 2018 No Comments

151 Views