如何在加载网页的地方更改 div 样式？

Question

我刚开始自己创建这些加载栏：

<div id="loading">
<div style="width: 650px;height: 40px;background-color: white;left:calc(50% - 325px);top: calc(50% - 20px);position: absolute;">
<div style="width:640px;height:30px;background-color:#0087cc;margin-top:5px;margin-left:5px">
<div id="myBtn" style="width:20px;height:30px;background-color:white;transition: all 2s;transition: all 0.5s ease 0s;">
</div>
</div>
</div>
</div>

白色条从左到右增加，所以在网页末尾我放了这些 JS - 这样它就结束了加载条并更改显示属性 o 整个加载 div :

$(window).load(function() {
         document.getElementById("myn").style.width = "640px";
         setTimeout(function(){$('#loading').fadeOut()}, 2700);
     })

但我需要更改 div 最上面那个栏的宽度（例如，加载 10 张图片后更改为 100px，加载另外 10 张图片后更改为 200px ect ) 在网页上创建页面加载时加载栏的进度变化。

我如何 更改网页大部分位置的 div 宽度，以在加载网页时创建加载栏的连续移动。

而且：我不想用Progressbar，我喜欢自己做东西:-)

感谢您的帮助

Answer 1

据我所知，以下代码片段可以满足您的需求。按下按钮（或加载某些图像时），宽度将增加 16 像素。这可以是任何变量，并且 jQuery 也可以用来为它设置动画。这只是一个例子来说明原理。

$('#button').click(function() {
  var width = $('.progress').width();
  
  if (width < 256) {
    width = width + 16;
    $('.progress').width(width)
  }

});

div.progress-bar {
  width: 256px;
  height: 32px;
  border: 1px solid black;
}
div.progress {
  width: 0px;
  height: 100%;
  background-color: #e0e0e0;
}
button#button {
  margin-top: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
  <div class="progress">

  </div>
</div>

<button id="button">MORE PROGRESS!</button>

Answer 2

最后，我使用此代码更改 div 加载网页位置的宽度：

//First is width 20 in the css 
#myBtn {width:20px;height:30px;background-color:white;transition: all 0.5s ease 0s;}

**The HTML :**

// width 62.5% after load div#2013
$('#2013').load("load" , function() {
         $('#myBtn').css('width', '62.5%');
});

some images

//last 100% after load div#2010 with images and with fadeout
$('#2010').load("load" , function() {
         $('#myBtn').css('width', '100%');
         setTimeout(function(){$('#loading').fadeOut()}, 2700);
});

如何在加载网页的地方更改 div 样式？

How to change div style on the places of loading web?

html

javascript

css

loading

progress-bar