Javascript loading div for ajax calls or intensive operations


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. LOADING = {
  2. showLoading: function(title, help, image) {
  3.  
  4. var default_skin = "#ajax-load-background {opacity:0.55; position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: none repeat scroll 0% 0%; background-color:#000; z-index: 4999;}#ajax-load {position: fixed;z-index: 5000;top: 50%;left: 50%; margin-left: -20px;text-align: center;}#ajax-load #ajax-load-title, #ajax-load #ajax-load-help {color: #fff;}#ajax-load #ajax-load-title {font-size: 16px;}#ajax-load #ajax-load-help {font-size: 10px;}";
  5.  
  6. var head = document.getElementsByTagName("head")[0];
  7.  
  8. // tricky hack for IE
  9. var htmDiv = document.createElement('div');
  10.  
  11. htmDiv.innerHTML = '<p>x</p><style type="text/css">'+default_skin+'</style>';
  12. head.insertBefore(htmDiv.childNodes[1], head.firstChild);
  13.  
  14. var bgDiv = document.createElement('div');
  15. bgDiv.id = 'ajax-load-background';
  16.  
  17. var mainDiv = document.createElement('div');
  18. mainDiv.id = 'ajax-load';
  19.  
  20. var titleDiv = document.createElement('div');
  21. titleDiv.id = 'ajax-load-title';
  22. titleDiv.innerHTML = title;
  23.  
  24. var imgLoading = document.createElement('img');
  25. imgLoading.src = image;
  26.  
  27. var helpDiv = document.createElement('div');
  28. helpDiv.id = 'ajax-load-help';
  29. helpDiv.innerHTML = help;
  30.  
  31. mainDiv.appendChild(titleDiv);
  32. mainDiv.appendChild(imgLoading);
  33. mainDiv.appendChild(helpDiv);
  34.  
  35. document.body.appendChild(bgDiv);
  36. document.body.appendChild(mainDiv);
  37. },
  38.  
  39. hideLoading: function() {
  40. if ( document.getElementById('ajax-load-background') ) {
  41. document.getElementById('ajax-load').parentNode.removeChild(document.getElementById('ajax-load'));
  42. document.getElementById('ajax-load-background').parentNode.removeChild(document.getElementById('ajax-load-background'));
  43. }
  44. }
  45. }
  46.  
  47. LOADING.showLoading('Loading', 'please wait', './images/loading.gif')

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.