将进度条应用于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);
});