Ajax Page Mask With Loading Indicator
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
-Rushi