THERimania THERimania THERimania THERimania - 3 months ago 6x
Javascript Question

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

I just started creating these Loading bar by me:
White bar

<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;">

The white bar is increasing from left to right , so on the end of web page i put these JS - so it makes end of loading bar and change display property o whole loading div :

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

But I need to change the div width of that bar on the most place (for example after loading 10 picture change with to 100px and after loading another 10 pics change with to 200px ect ) on the web to create progress change of loading bar when the page will loading.

How can I change that div width on the most places of web to create continuously move of loading bar on loading web page.

And : I dont want to use Progressbar, I like to make things by myself :-)

Thanks for your help


The following code snippet wil do, as far as I understand, what you want. On a press of a button (or when some images are loaded), the width will increase by 16 pixels. This could be any variable and jQuery can be used to animate it as well. This is just an example to illustrate the principle.

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

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=""></script>
<div class="progress-bar">
  <div class="progress">


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