Create the Loading Dots Animation with 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>
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory