javascript show loading panel without ajax call or service call

Question

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();

if you want simple css and javascript solution then i will give you but i dont know about kndro.ui.progress. ? it is selectore like $('.progress') in jquery — Keval Bhatt, Oct 30 '15 at 06:20
actuality you want delay without setTimeout and ajax, right ? — Shailendra Sharma, Oct 30 '15 at 06:26
Kevel, no problem yaar. I try with all loading panel. its not working. I modified the code now — vinoth, Oct 30 '15 at 06:37

score 1 · Accepted Answer · edited Dec 02 '16 at 19:39

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}

Thanks Shailendra.. here my requirement is to expand grid on client side its getting long time to expand so I try implement progress bar for user interface. — vinoth, Oct 30 '15 at 07:42

javascript show loading panel without ajax call or service call

1 Answers1