Any web app without ajax calls is hard to imagine. A lot of javascript frameworks provide this solution of ajax page mask and custom loading indicator. Here we see a solution that uses plain css and javascript. The good thing about this solution is, it is completely customizable, from the color of the page mask to the loading indicator.

css Style:

1
2
3
4
5
6
7
8
9
10
11
#loadingScreen{
	position:"fixed";
	top:"0";
	left:"0";
	right:"0";
	bottom:"0";
	z-index:"10000";
	background-color:"black";
	opacity:"0.9";
	display:'none';
}

Javascript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function toggleAjaxMask()
 {
	var ele = document.getElementById('loadingScreen');
	if(ele == null){
		var ele = document.createElement('div');
		ele.id = "loadingScreen";
		var html = '<img style="position:absolute;top:40%;left:45%;" alt="loading"
                            src="http://www.rushis.com/wp-content/uploads/2014/03/loading.gif" alt="Loading" />';
		ele.innerHTML = html;
		var body = document.getElementsByTagName('body');
		body[0].appendChild(ele);
	}
	ele = document.getElementById('loadingScreen');
	ele.style.display = ele.style.display=='none' ? 'block' : 'none';
 }


Click this button to see Ajax mask in action

“Code it yourself to learn more.”
-Rushi

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>