Windows Phone 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

<span>Loading</span> <span class="l-1"></span> <span class="l-2"></span> <span class="l-3"></span> <span class="l-4"></span> <span class="l-5"></span> <span class="l-6"></span>

body { font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif; text-align: center; margin-top: 20px; font-size: 14px; color: #333; } span { display: block; margin: 0 auto; } span[class*="l-"] { display: inline-block; background: #000; width: 4px; height: 4px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 12px 2px; position: relative; -webkit-animation: loader 4s infinite; -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -webkit-animation-fill-mode: both; -moz-animation: loader 4s infinite; -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; -ms-animation: loader 4s infinite; -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -ms-animation-fill-mode: both; animation: loader 4s infinite; animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); animation-fill-mode: both; } span.l-1 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } span.l-2 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -ms-animation-delay: 0.8s; animation-delay: 0.8s; } span.l-3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; animation-delay: 0.6s; } span.l-4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; } span.l-5 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; } span.l-6 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes loader { 0% { -webkit-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -webkit-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loader { 0% { -moz-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -moz-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes loader { 0% { -ms-transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { -ms-transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } } @keyframes loader { 0% { transform: translateX(-30px); opacity: 0; } 25% { opacity: 1; } 50% { transform: translateX(30px); opacity: 0; } 100% { opacity: 0; } }

Tutorials Palace 17 December, 2018 No Comments

113 Views