如何在html和javascript中显示隐藏不确定的圆形进度条

Question

Hello am not to familiar with html and JavaScript. Am using them because map v3 is available only in JavaScript. How do set an indeterminate circular progress bar to display when my map is loading with function initialize and to turn it off after loading.

Answer 1

Make a GIF loading image here - http://www.ajaxload.info/ and download it. Then upload it to your webserver.

Then just show it during loading and hide it when complete. Let's say that the image has an ID of loadingIMG:

<img src='path/to/image.gif' id='loadingImg' />

//During Loading
$('#loadingImg').show();

//After done loading
$('#loadingImg').hide();

/////////////////// OR for fade in and out //////////////////

//During Loading
$('#loadingImg').fadeIn();

//After done Loading
$('#loadingImg').fadeOut();

Or since you indicated you want the progress element:

<progress id='progressbar' val='0' max='1000' ></progress>
<p id='loadingTxt' style='display: none;'>Loading Location...</p>

//When it is loading...
//Show the loading text
$('#loadingTxt').show();

//During loading, just have dummy progress
var timer = setInterval(function(){ 

     //Incriment Progress bar
     $('#progressbar').attr('value',parseInt($('#progressbar').attr('value'))+10);
}, 1000);

//When completed, set bar to full
//Stop timer,
clearInterval(timer);

//Set to full,
$('#progressbar').attr('value',1000);

//Hide the loading text
$('#loadingTxt').hide();

Just adjust the max val to meet the needs of how fast it loads.

Answer 2

Use *.gif image on state loading, and remove it after map load. You don't need any animation, just create it in gif. Or Use othe image and rotate it via css or js.