Create the Loading Dots Animation with CSS & JavaScript

C
Published in: CSS - JavaScript

If you happen to a click a link pointing to the Apple apps store on your desktop, the browser opens a temporary web page with a message saying “Connecting to the Mac App Store..” and then redirects to the actual page. It tries to open the Apps Store or iTunes software on your desktop and while the program loads, the dots in the message animate indicating that a task is in progress.

These dots are animated using simple CSS and JavaScript. It runs in forever loop and in every iteration, the number of dots is incremented by 1 and resets at 3. So it goes from 0, 1, 2 and then back to 0, 1, 2 and so on.

<p>Connecting to the Mac App Store<span id="loading-dots">.</span></p>

<script>
$(document).ready( function() {
  var x=0;
  setInterval(function() {
    var dots = "";
    x++;
    for (var y=0; y < x%3; y++) {
        dots+=".";
    }
    $("#loading-dots").text(dots);
  } , 500);
});
</script>
Published in: CSS - JavaScript

Looking for something? Find here!

Meet the Author

Web Geek, Tech Columnist
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in GSuite and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. Read more on Lifehacker and YourStory

Get in touch