Simple square shape animated Dot Loader

By | October 1, 2018

Simple animated loader develped using HTML, CSS and JavaScript. Demo and Download options available.

Demo Download

Author Kyle Brumm
Created MARCH 26, 2017
License Open
Compatible browsers Chrome, Firefox, Safari

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

Simple square shape animated Dot Loader preview