CODEWITHSUNDEEP
javascripthtmlcss
shubham kapoor
shubham kapoor

Reputation: 599

progress bar is not working

i am trying to made progress bar but its can working plz solve it . i am using if else for increasing the width but it's not working

var x = document.getElementById("p_bar");

for(var i = 0; i < 100; i++) {
  var wid;
  wid=1;
  if(wid == 800)
    break;
  else
    wid+=8;	
  x.style.width=wid+"px";
}
		
 document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont {
    width: 800px;
    height: 30px;
    background-color: cornsilk;
    position: relative;
}

#p_bar {
  width: 8px;
  height: 30px;
  background-color: red;
  position: absolute;
}
<div id="cont">
    <div id="p_bar"></div>
</div>
<p id="write"></p>

Upvotes: 0

Views: 162

Answers (3)

Alireza Sheikholmolouki
Alireza Sheikholmolouki

Reputation: 180

I wrote it again using functions, try this shubham:

var x = document.getElementById('p_bar');
var container = document.getElementById('cont');
var write = document.getElementById('write');

var containerWidth = container.offsetWidth;
var currentWidth = x.offsetWidth;

var compeleteProgress = function (step, every) {
	currentWidth = Math.min(currentWidth + step, containerWidth);
	write.innerHTML = Math.floor((currentWidth / containerWidth) * 100) + '%' // Priniting percentage
	x.style.width = currentWidth + 'px'
	if (currentWidth < containerWidth) setTimeout(function () {
		compeleteProgress(step, every)
	}, every)
}

compeleteProgress(8, 300) // When you call this function, everything starts
		
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont{
	width: 800px;
	height: 30px;
	background-color: cornsilk;
	position: relative;
}
#p_bar{
	width: 8px;
	height: 30px;
	background-color: red;
	position: absolute;	
}
<div id="cont">
	<div id="p_bar"></div>
</div>
<p id="write"></p>

Upvotes: 0

Petr Štipek
Petr Štipek

Reputation: 31

I am not sure what behavior you really expects. The Bar size is usually changed according to any application events (in my example by timeouts). I hope this helps:

 document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
 
 var setBarWidthInPercent = function(barId, value){
 	var bar=document.getElementById(barId);
  bar.style.width = value+"%";
 } 
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",10)
 },500)
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",50)
 },1500)
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",100)
 },3000)
#cont{
	width: 800px;
	height: 30px;
	background-color: cornsilk;
	position: relative;
}
#p_bar{
	width: 8px;
	height: 30px;
	background-color: red;
	position: absolute;
	-webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}
<div id="cont">
	<div id="p_bar"></div></div>
	<p id="write"></p>

Upvotes: 0

kyun
kyun

Reputation: 10294

var x=document.getElementById("p_bar");
var wid = 1;

var it = setInterval(function(){

  if(wid <= 800){
      wid+=8;
      x.style.width=wid+"px";
  }else{
    clearInterval(it);
  }

}, 1000);

		
 document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont{
	width: 800px;
	height: 30px;
	background-color: cornsilk;
	position: relative;
}
#p_bar{
	width: 8px;
	height: 30px;
	background-color: red;
	position: absolute;
	
}
	
<div id="cont">
	<div id="p_bar"></div></div>
	<p id="write"></p>

If you want to see moving progress bar, You should use setInterval().

If you use just for, you can't see any animation.

Because, computer's calculating is so fast, so you can see only the result of for

Upvotes: 3

Related Questions