manually create spinning activity indicators

Question

I apologize if this question is answered somewhere, but I couldn't find it.

I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.

I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?

Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.

Thank you very much for you time and help!

There are many ways to implement a spinner, you need to figure out what you want and ask in detail. Also supply us with what you have tried so far and what did not work — Huangism, May 16 '16 at 14:23

score 3 · Accepted Answer · answered May 16 '16 at 14:28

3

It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.

    $("#saveButton").click(function(){
        displayLoadingPage();
    });

    $("#deleteButton").click(function(){
        displayLoadingPage();
    });

    function displayLoadingPage() {
        //call your spin.js code here.
    }

Let me know if this answers what you were getting at.

answered May 16 '16 at 14:28

Daniel Patrick

3,980
6
29
49

Yes, that is it. So I should start the spinner first in the displayLoadingPage() function and stop it in the end? – ddelic May 16 '16 at 14:42
OK, figured it out. Thanks for the help, I didn't understand your code first time I've read it. Now it all makes sense, when user clicks, display loading page :D – ddelic May 16 '16 at 15:00
Hi bocasa, sorry, didn't see that comment of yours. Yes, these are firing your spin event "on the click". If you found this answered your question, please throw me an upvote and an "Accept". :) I will continue to polish the answer for future users. – Daniel Patrick May 16 '16 at 15:38

score 2 · Answer 2 · answered May 16 '16 at 18:20

I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js

All you need is : 1) A div which is hidden on page load covering your table with spinner aligned center in it 2) On Save/Delete button click you can just make the div visible. 3) Hide the div again once you receive response from the rest api that saves or delete the data.

Below is the HTML:

<div class="container"> 
    <div id="loading" class="loading" onClick="hideSpinner()">
        Loading&#8230;     
    </div>
    <input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>

JS Code:

var loadingDiv = document.getElementById('loading');

function showSpinner() {
  loadingDiv.style.visibility = 'visible';
}

function hideSpinner() {
  loadingDiv.style.visibility = 'hidden';
}

Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM

Click anywhere on the overlay to close it.

I have used the overlay that @MattIn4D has created here

This is also nice piece of code but I am having issues with CRM system and making this work properly, it really has problems with html web resources. When I first started thinking about loading screen I wanted to make it happen in one or two code lines, but apparently there is something more to it :) +1 for the answer thanks — ddelic, May 17 '16 at 08:16

manually create spinning activity indicators

2 Answers2