CODEWITHSUNDEEP
javascripthtmlcssprogress-barloading
THERimania THERimania
THERimania THERimania

Reputation: 61

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

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

Upvotes: 4

Views: 492

Answers (2)

THERimania THERimania
THERimania THERimania

Reputation: 61

Finally i Use this code to change div width on the place of loading web :

//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);
});

Upvotes: 0

Bart Koppelmans
Bart Koppelmans

Reputation: 195

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;
    $('.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>

Upvotes: 1

Related Questions