Simple animated loader develped using HTML, CSS and JavaScript. Demo and Download options available.
HTML Snippet
<main class="main container"> <div class="col col--full"> <div class="dot-loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </main>CSS Code
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300); *, *:before, *:after { box-sizing: border-box; } html { font-family: 'Open Sans', Helvetica, arial, sans-serif; background-color: #eeeeee; color: #333333; } h1, h2, h3, h4, h5, h6 { text-align: center; font-family: 'Raleway', 'Open Sans', sans-serif; } .header { position: relative; overflow: visible; } .header:after { content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 50px; height: 2px; background-color: #30b37e; } .pen__subheading { margin-bottom: 0; } .pen__subheading a { color: #30b37e; } .pen__subheading a:hover, .pen__subheading a:focus { color: #5cd3a3; } a { text-decoration: none; color: #333333; } .container { overflow: hidden; width: 100%; max-width: 800px; margin: 0 auto; padding: 2rem 1rem; } .col { padding: 1rem; } @media (min-width: 800px) { .col { width: 50%; float: left; } .col:nth-of-type(2n+1) { clear: left; } } .col.col--full { width: 100%; } .dot-loader { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto; } .dot-loader .dot { position: absolute; width: 8px; height: 8px; background-color: #30b37e; border-radius: 100%; } .dot-loader .dot:nth-of-type(1) { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .dot-loader .dot:nth-of-type(2) { -webkit-transform: translate(16px, 0px); transform: translate(16px, 0px); } .dot-loader .dot:nth-of-type(3) { -webkit-transform: translate(32px, 0px); transform: translate(32px, 0px); } .dot-loader .dot:nth-of-type(4) { -webkit-transform: translate(48px, 0px); transform: translate(48px, 0px); } .dot-loader .dot:nth-of-type(5) { -webkit-transform: translate(64px, 0px); transform: translate(64px, 0px); } .dot-loader .dot:nth-of-type(6) { -webkit-transform: translate(0px, 16px); transform: translate(0px, 16px); } .dot-loader .dot:nth-of-type(7) { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px); } .dot-loader .dot:nth-of-type(8) { -webkit-transform: translate(32px, 16px); transform: translate(32px, 16px); } .dot-loader .dot:nth-of-type(9) { -webkit-transform: translate(48px, 16px); transform: translate(48px, 16px); } .dot-loader .dot:nth-of-type(10) { -webkit-transform: translate(64px, 16px); transform: translate(64px, 16px); } .dot-loader .dot:nth-of-type(11) { -webkit-transform: translate(0px, 32px); transform: translate(0px, 32px); } .dot-loader .dot:nth-of-type(12) { -webkit-transform: translate(16px, 32px); transform: translate(16px, 32px); } .dot-loader .dot:nth-of-type(13) { -webkit-transform: translate(32px, 32px); transform: translate(32px, 32px); } .dot-loader .dot:nth-of-type(14) { -webkit-transform: translate(48px, 32px); transform: translate(48px, 32px); } .dot-loader .dot:nth-of-type(15) { -webkit-transform: translate(64px, 32px); transform: translate(64px, 32px); } .dot-loader .dot:nth-of-type(16) { -webkit-transform: translate(0px, 48px); transform: translate(0px, 48px); } .dot-loader .dot:nth-of-type(17) { -webkit-transform: translate(16px, 48px); transform: translate(16px, 48px); } .dot-loader .dot:nth-of-type(18) { -webkit-transform: translate(32px, 48px); transform: translate(32px, 48px); } .dot-loader .dot:nth-of-type(19) { -webkit-transform: translate(48px, 48px); transform: translate(48px, 48px); } .dot-loader .dot:nth-of-type(20) { -webkit-transform: translate(64px, 48px); transform: translate(64px, 48px); } .dot-loader .dot:nth-of-type(21) { -webkit-transform: translate(0px, 64px); transform: translate(0px, 64px); } .dot-loader .dot:nth-of-type(22) { -webkit-transform: translate(16px, 64px); transform: translate(16px, 64px); } .dot-loader .dot:nth-of-type(23) { -webkit-transform: translate(32px, 64px); transform: translate(32px, 64px); } .dot-loader .dot:nth-of-type(24) { -webkit-transform: translate(48px, 64px); transform: translate(48px, 64px); } .dot-loader .dot:nth-of-type(25) { -webkit-transform: translate(64px, 64px); transform: translate(64px, 64px); } .dot-loader.active .dot { transition: 0.3s ease-in-out; } .dot-loader.active .dot:nth-of-type(1) { -webkit-transform: translate(0, 16px); transform: translate(0, 16px); } .dot-loader.active .dot:nth-of-type(2) { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .dot-loader.active .dot:nth-of-type(3) { -webkit-transform: translate(16px, 0); transform: translate(16px, 0); } .dot-loader.active .dot:nth-of-type(4) { -webkit-transform: translate(32px, 0); transform: translate(32px, 0); } .dot-loader.active .dot:nth-of-type(5) { -webkit-transform: translate(48px, 0); transform: translate(48px, 0); } .dot-loader.active .dot:nth-of-type(6) { -webkit-transform: translate(0px, 32px); transform: translate(0px, 32px); } .dot-loader.active .dot:nth-of-type(7) { -webkit-transform: translate(32px, 16px); transform: translate(32px, 16px); } .dot-loader.active .dot:nth-of-type(8) { -webkit-transform: translate(48px, 16px); transform: translate(48px, 16px); } .dot-loader.active .dot:nth-of-type(9) { -webkit-transform: translate(48px, 32px); transform: translate(48px, 32px); } .dot-loader.active .dot:nth-of-type(10) { -webkit-transform: translate(64px, 0px); transform: translate(64px, 0px); } .dot-loader.active .dot:nth-of-type(11) { -webkit-transform: translate(0px, 48px); transform: translate(0px, 48px); } .dot-loader.active .dot:nth-of-type(12) { -webkit-transform: translate(16px, 16px); transform: translate(16px, 16px); } .dot-loader.active .dot:nth-of-type(13) { -webkit-transform: translate(32px, 32px); transform: translate(32px, 32px); } .dot-loader.active .dot:nth-of-type(14) { -webkit-transform: translate(48px, 48px); transform: translate(48px, 48px); } .dot-loader.active .dot:nth-of-type(15) { -webkit-transform: translate(64px, 16px); transform: translate(64px, 16px); } .dot-loader.active .dot:nth-of-type(16) { -webkit-transform: translate(0px, 64px); transform: translate(0px, 64px); } .dot-loader.active .dot:nth-of-type(17) { -webkit-transform: translate(16px, 32px); transform: translate(16px, 32px); } .dot-loader.active .dot:nth-of-type(18) { -webkit-transform: translate(16px, 48px); transform: translate(16px, 48px); } .dot-loader.active .dot:nth-of-type(19) { -webkit-transform: translate(32px, 48px); transform: translate(32px, 48px); } .dot-loader.active .dot:nth-of-type(20) { -webkit-transform: translate(64px, 32px); transform: translate(64px, 32px); } .dot-loader.active .dot:nth-of-type(21) { -webkit-transform: translate(16px, 64px); transform: translate(16px, 64px); } .dot-loader.active .dot:nth-of-type(22) { -webkit-transform: translate(32px, 64px); transform: translate(32px, 64px); } .dot-loader.active .dot:nth-of-type(23) { -webkit-transform: translate(48px, 64px); transform: translate(48px, 64px); } .dot-loader.active .dot:nth-of-type(24) { -webkit-transform: translate(64px, 64px); transform: translate(64px, 64px); } .dot-loader.active .dot:nth-of-type(25) { -webkit-transform: translate(64px, 48px); transform: translate(64px, 48px); }JavaScript Snippet
Javascript setInterval used for loading the animation in certain interval.
setInterval(function() { $('.dot-loader').toggleClass('active'); }, 350);Preview
Leave a Reply