將進度條應用到html頁面

Question

我有這個代碼，當我按下OK按鈕時，另一個頁面被加載到IFrame中，現在我想在下一頁加載到iframe之前添加一個進度條。 這是在2500ms後的頁面中的iframe

$('#ida').click(function() { 
    setTimeout(function(){ 
    $("#frame1").show(); 
    }, 2500); 
}); 

</script> 

<iframe name="myframe" id="frame1" style="display:none" src="xm5.jsp" width="1300" height="1000"> 
</iframe></div> 

我想補充這行代碼加載我的工作代碼（從jQuery的得到它，所有的CSS並添加腳本）

<div id="progressbar"><div class="progress-label">Loading...</div></div> 

但我應該在哪裏添加它？

Answer 1

隱藏progressbar div默認情況下。

#progressbar { 
    display: none; 
} 

然後在JS：

$('#ida').click(function() { 
    $('#progressbar').show(); //Show when you click it 
    setTimeout(function(){ 
    $("#frame1").show(); 
    $('#progressbar').hide(); //Hide when the iframe is fully loaded 
    }, 2500); 
});