CODEWITHSUNDEEP
javascriptjqueryjquery-spinner
vinoth
vinoth

Reputation: 35

javascript show loading panel without ajax call or service call

I want to show loading spinner inside javascript function itself. without setTimeout I have load spinner. can any one help me to sort out

//show progress bar   
$('.ajax-loading').show();

//very long loop or short loop
  for(i=0;i<n;i++){
   ------
 }
// hide progress bar
$('.ajax-loading').hide();

Upvotes: 0

Views: 2946

Answers (1)

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

You can't. if you're trying it than it's a bad user experience. JavaScript does not work in that way because long running JavaScript synchronous jobs block the browser's UI (everything on Ui), including image animations.

And the bad news is a majority of browser crashes are caused by badly constructed JavaScript loops.

That's why no loading image will show during the execution of your loop.

Here is the fiddle

HTML: 

<button class="k-button" id="progressStartButton" >Loading Start ......</button>
<div id="tabStripCompany">
                <ul>
                    <li class="k-state-active">Loading Example</li>

                </ul>
                <!-- Settings tab -->
                <div id="settingsTab" >
                    <div id="customerSettingsLoading" ></div>
                    <div id="customerSettings">


                    </div>
                </div>
                <div >
                    More stuff here...
                </div>
            </div>

JavaScript:

kendo.ui.progress($("#customerSettings"), true);
setInterval(function(){
         kendo.ui.progress($("#customerSettings"), false);
    $("#progressStartButton").text("Loading End !")
}, 3000)

$("#tabStripCompany").kendoTabStrip();

CSS: 

#customerSettings {
    position: relative;
}
#customerSettings{height:200px}

Upvotes: 1

Related Questions