JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click

Javascript - loading/busy indicator or transparent div over page on event click

Javacript to show a curtain:

function CalculateAmountOnClick () {
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    // your operations
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
}

Your CSS:

#curtain {
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  _height: expression(document.body.offsetHeight + "px");
  background: url(curtain.png);
  _background: url(curtain.gif);
}

(Move MSIE 6 underscore hacks to conditionally included files as desired.)

You could set this up as add/remove functions for the curtain, or as a wrapper:

function modalProcess( callback ) {
  var ret;
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    ret = callback();
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
  return ret;
}

Which you could then call like this:

var result = modalProcess(function(){
  // your operations here
});

How do I display icon or image on a div while it's loading?

There is a good plugin for this that called Nimle Loader http://www.salesclic.com/jquery.nimble.loader/demo/

How do you handle busy icons in an AJAX site?

If you want the same busy indicator for all actions, then use a counter.

Instead of "show_busy_icon()", do a "increment_busy_count()", which calls "show_busy_icon()" if busy count goes from 0 to 1. Instead of "hide_busy_icon()", do a "decrement_busy_count()", which calls "hide_busy_icon()" if busy count goes from 1 to 0.

Display a loading bar before the entire page is loaded

Use a div #overlay with your loading info / .gif that will cover all your page:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

jQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

---

Here's an example with a Loading bar:

jsBin demo

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="http://placehold.it/3000x3000/cf5">
</div>

JS: clearInterval doesn't work, functions don't get initiated when requirements met

I think you need to move your clearInterval & classList.remove into the interval callback.

Otherwise, it will only be evaluated once when time is 0.

const removeZero = () => {
  let value = document.getElementById('output').innerHTML;
  if (value == 0) {
    document.getElementById('output').innerHTML = ''
  }
}

const turnOff = () => {
  let display = document.getElementById('output')
  let time = 0;
  if (display.innerHTML == 0) {
    let timePassed = setInterval(() => {
      time++
      console.log(time)
      if (time == 5) {
        removeZero();
        document.querySelector('.statusLight').classList.remove('lighton')
        clearInterval(timePassed)
      }
    }, 1000)

  }
}

let display = document.getElementById('output')
if (display.innerHTML == 0) {
  turnOff()
}

<body>
  <div class="resultScreen">
    <div class="statusLight"></div>
    <p id="output"></p>
  </div>
  <script src="app.js"></script>
</body>

---

Related Topics