ryargg
Last Updated: February 25, 2016
·
14.37K
· barnettjw
43ea08b4fc547e8a5da87c207bea2123

A very simple "loading ..." animation in 5 lines of JavaScript

Here's a way to do a really simple "loading ..." animation, in just 5 lines of JavaScript

i = 0;
setInterval(function() {
  i = ++i % 4;
  $("#loading").html("Loading "+Array(i+1).join("."));
}, 800);

Working JavaScript Demo on codepen.io

For the lazy, who don't want to go over to codepen.io and see the actual working JavaScript demo. Here's an animated gif that will give you an idea of what it looks like.

Say Thanks
Respond

2 Responses
Add your response

13017
0 sme3tglkb9od25hazgvtt81ezkg826ta4ryyt8njopwk1cnl9xzdphhcr4jx738juse0gf6hbcmn

Hello James,
this is as simple as really nice and useful.

I would like to use it in my site, and display it meanwhile the page is loading, but I don't really know how to do that :O

Could you please give me an hand?

Cheers, MT

over 1 year ago ·
17224
None

Well that is very nice.
I made minor changes to make it pure JS and actually added some style to it.

http://codepen.io/dvLden/pen/uHBpe/

Regards,
Nenad - dvLden

over 1 year ago ·