Implementing a loading spinning wheel in javascript

Question

In my web site I need to pop up a dummy 'loading' spinning wheel when click a button and vanish after some time. It's just a dummy page. I would be much obliged if anyone can explain how to do such a thing. Can I do this with javascript or jQuery?

Thanx in advance

Usually *dummy 'loading' spinning wheel* is just a gif which you can show or hide using javascript. — Aleksandr M, Oct 11 '13 at 09:50
it can be done in javascript and jquery also!!! your choice.... simply have a div with a preferred image and display/hide when required!!! — Ayyappan Sekar, Oct 11 '13 at 09:51
Yes you can do this using jQuery...on page load display overlay on body tag and then using `setTimeout()` clear that overlay. — Dipesh Parmar, Oct 11 '13 at 09:51
http://stackoverflow.com/questions/1853662/how-to-show-page-loading-image-div-text-until-the-page-has-finished-loading-rend — , Oct 11 '13 at 09:54
besides, you can do this using html canvas too. (not recommended) http://www.dougtesting.net/ — lastr2d2, Oct 11 '13 at 09:59
See: http://stackoverflow.com/questions/11276184/spinning-wheel-in-jquery The accepted answer contains a complete solution. The spinning wheel is just an animated gif or png. — madeddie, Oct 11 '13 at 09:53
Actually i have a pop up window. User should enter some field value.After that user click a button. What I want is when user click that button another window should pop up with a loading spinning wheel. How can I do that?Can you please explain with an example? — Rose18, Oct 11 '13 at 10:07

score 5 · Accepted Answer · answered Oct 11 '13 at 10:07

Have a div/image in the right place you need, hide it first time the page loaded. like

<input type="button" id="button"/>
  <div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>

and in your jquery, set a handler for the click event of button to show or hide the div

$(document).ready(function(){
  $('#button').click(function(){
    $('#load').show();
    setTimeout(function() {$('#load').hide()}, 2000);
  });
});

setTimout can be used to hide the div after some time. check the workign example here

Your image link leads to a questionable location – Matt M Nov 10 '21 at 21:16 — Matt M, Nov 10 '21 at 21:16

score 2 · Answer 2 · answered Oct 11 '13 at 10:03

you can do it by ajax or simply jquery.

here is the ajax way

$.ajax({
       type: "POST",
       data: serializedDataofthisform,
       dataType: "html",     /*  or json   */
       url: "your url",
       /*  ajax magic here   */
       beforeSend: function() {
      $('#loaderImg').show();    /*showing  a div with spinning image */
        },
       /* after success  */
       success: function(response) {

       /*  simply hide the image */    
       $('#loaderImg').hide();
       /*  your code here   */
      }
     });

html

<div id="loaderImg"><img src="path" alt=""/></div>

Javascript by time out function :- setTimeout()

score 2 · Answer 3 · edited May 26 '21 at 15:57

Here's another example that doesn't use an image.

// Author: Jared Goodwin
// showLoading() - Display loading wheel.
// removeLoading() - Remove loading wheel.
// Requires ECMAScript 6 (any modern browser).
function showLoading() {
  if (document.getElementById("divLoadingFrame") != null) {
    return;
  }
  var style = document.createElement("style");
  style.id = "styleLoadingWindow";
  style.innerHTML = `
        .loading-frame {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.8);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 4;
        }

        .loading-track {
            height: 50px;
            display: inline-block;
            position: absolute;
            top: calc(50% - 50px);
            left: 50%;
        }

        .loading-dot {
            height: 5px;
            width: 5px;
            background-color: white;
            border-radius: 100%;
            opacity: 0;
        }

        .loading-dot-animated {
            animation-name: loading-dot-animated;
            animation-direction: alternate;
            animation-duration: .75s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        @keyframes loading-dot-animated {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    `
  document.body.appendChild(style);
  var frame = document.createElement("div");
  frame.id = "divLoadingFrame";
  frame.classList.add("loading-frame");
  for (var i = 0; i < 10; i++) {
    var track = document.createElement("div");
    track.classList.add("loading-track");
    var dot = document.createElement("div");
    dot.classList.add("loading-dot");
    track.style.transform = "rotate(" + String(i * 36) + "deg)";
    track.appendChild(dot);
    frame.appendChild(track);
  }
  document.body.appendChild(frame);
  var wait = 0;
  var dots = document.getElementsByClassName("loading-dot");
  for (var i = 0; i < dots.length; i++) {
    window.setTimeout(function(dot) {
      dot.classList.add("loading-dot-animated");
    }, wait, dots[i]);
    wait += 150;
  }
};

function removeLoading() {
  document.body.removeChild(document.getElementById("divLoadingFrame"));
  document.body.removeChild(document.getElementById("styleLoadingWindow"));
};

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 27) {
    removeLoading();
  }
}, false);

<html>
  <button onclick="showLoading()">Click me</button>
  <p>Press Escape to stop animation.</p>
</html>

This works fine in Microsoft Edge. But doesn't work in IE5. Can you please give a sample which will work on IE5 — Nid, Jun 17 '22 at 15:49

Implementing a loading spinning wheel in javascript

3 Answers3