Introduction

Mobile applications often request data from external resources and sometimes it noticeably takes time. In such situations it is wise to show a preloader. Preloaders are graphical elements which inform the user that the application is busy and that he should wait for a while. In this short article we want you to introduce one of the most popular JavaScript canvas preloaders. JavaScript loaders have many advantages over simple graphical or animated gifs. You can quickly change their size, color and even shape. These features are also included in the Heartcode CanvasLoader, which has a circular shape and can be easily configured online.

Loader configuration

You can find the Heartcode CanvasLoader documentation here. There is also an online configuration tool where you can test all the preloader properties and see the applied changes instantly. When you are satisfied with your version of the preloader you can copy the JavaScript code to the clipboard and use it in your own project.

The following code is generated using the configurator and creates a green spiral preloader.

var cl = new CanvasLoader('canvasloader-container');
cl.setColor('#29cc4f'); // default is '#000000'
cl.setShape('spiral'); // default is 'oval'
cl.setDiameter(106); // default is 40
cl.setDensity(108); // default is 40
cl.setRange(0.5); // default is 1.3
cl.setFPS(35); // default is 24
cl.show(); // Hidden by default

Most properties are self-explanatory, except two, which have a big impact on the preloaders' visual look. Using density you can change the number of shapes. Using many shapes at once you can create a bigger shape e.g. many oval shapes create a bended bar. The range property adjusts the amount of the modified shapes in percent. So you can control the number of visible elements vs non visible elements or the bars' length.

Example preloaders

Thanks to the online configurator we have designed six different preloaders.

In the following code we create dynamically six preloaders from an array with parameters read from the online configurator.

document.addEventListener('DOMContentLoaded', function(evt){
    
	var parameters = [	{color:'#fff305',shape:'spiral',density:160,range:0.7,speed:6,fps:30},
	                  	{color:'#00fff2',shape:'oval',density:160,range:0.8,speed:4,fps:30},
		              	{color:'#cddedd',shape:'oval',density:13,range:0.5,speed:1,fps:30},	
		            	{color:'#ff85ff',shape:'rect',density:140,range:.8,speed:10,fps:30},
		            	{color:'#a2ff99',shape:'rect',density:15,range:1,speed:1,fps:30},
		            	{color:'#ff7700',shape:'roundRect',density:10,range:0.7,speed:1,fps:30} ];
	var diameter = Math.round(Math.min(screen.width,screen.height)/5*0.7);
	
	parameters.forEach(function(el,i){
		var cl = new CanvasLoader('loader-con-'+(i+1),{id:'loader-'+(i+1)});
		cl.setColor(el.color);
		cl.setShape(el.shape);
		cl.setDiameter(diameter);
		cl.setDensity(el.density);
		cl.setRange(el.range);
		cl.setSpeed(el.speed);
		cl.setFPS(el.fps);	
		cl.isVisible = false;
		document.getElementById('loader-con-'+(i+1)).addEventListener('click',function(evt){
			if(cl.isVisible) {
				cl.isVisible = false;
				cl.hide();
			} else {
				cl.isVisible = true;
				cl.show();
			}
		});		
	});
	document.getElementById('loader-con-'+Math.ceil(Math.random()*6)).click();	
});

The size of preloaders is set based on the device screen size. Each preolader changes its visibility status by clicking on it. To show/hide the preloader, the appriopriate methods are called.

Summary

Customizable preloaders can be very useful especiallly when an application loads large amounts of data. You can also easily customize the preloader to fit the design of your application.