Javascript instead loading.gif

In web applications, when a user is waiting for the results of a process, an animated image is often shown to him, indicating that the application performs some actions and the user needs to wait. Most often this picture is loading.gif.

I am not a supporter of the use of graphics in web design, because loading graphics creates an extra load on the server, increases the waiting time when opening the page, and first of all because these graphics need to be specially created to detract from the main process - programming and layout.

Being engaged in another new project, I wondered what loading.gif would look like on this site. Since the design of the site as a whole is quite original, the details should also look special. I did not want to climb into the flash. Plus, when I tried to make a gif-animation in a flash, the result for some reason turned out to be of very poor quality, so earlier I just used loading.gif from VKontakte or Facebook.
')
This time I got the idea: to replace this image with a code. There are several options here. The first is dom animation. The second is canvas animation.

I decided to use the first option and to try to do something similar to loading.gif from Facebook. That's what happened.

CSS:

.loading div { opacity: 0; border: 1px #a6a6a6 solid; box-shadow: inset 0px 0px 3px #000; -moz-box-shadow: inset 0px 0px 3px #000; -webkit-box-shadow: inset 0px 0px 3px #000; background-color: #ebebeb; float:left; } 

Javascript (jquery used):

 function loadingShow(obj, time){ obj.animate({'opacity': 1}, time, function(){ loadingHide(obj, time); }); } function loadingHide(obj, time){ obj.animate({'opacity': 0.3}, time, function(){ setTimeout(function(){ loadingShow(obj, time); }, 500); }); } setInterval(function(){ $('.loading').each(function(){ var obj = $(this); if(obj.children('div').length>0) return; var w = 30; var h = 50; obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="clear:both"></div>'); var i = 0; var time = 100; obj.children('div').each(function(){ i++; var obj = $(this); setTimeout(function(){ loadingShow(obj, time*2); }, i*time); }); }); }, 100); 

To add animation, you need to do something like:

 dom_object.append('<div class="loading"></div>'); 

Advantages of this approach:

1. No need to create graphics
2. Server load decreases, page loading speed increases
3. Animation can be easily adjusted programmatically.

Cons of this approach:

1. When switching between tabs in the browser, timing is lost

Tested only in Google Chrome. The specified minus is not even important, since this animation is usually shown for a very short time - you don’t even have time to switch between tabs.