The progress bar seems to be malfunctioning

Question

The progress bar seems to be malfunctioning

Need help with my progress bar, it's not working properly. Can someone assist me?

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>

javascript html css

Answer 1

Answer №1

const progressBar = document.getElementById("p_bar");
let widthCount = 1;

const interval = setInterval(function(){

  if(widthCount <= 800){
      widthCount += 8;
      progressBar.style.width = widthCount + "px";
  } else {
    clearInterval(interval);
  }

}, 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>

To observe a dynamic progress bar, utilize the setInterval() method.

If you solely rely on a for loop, there won't be any visual animation visible.

This is due to the rapid computation speed of computers, which only allows you to witness the final outcome of the for loop.

Answer 2

const progressBar = document.getElementById("p_bar");
let widthCount = 1;

const interval = setInterval(function(){

  if(widthCount <= 800){
      widthCount += 8;
      progressBar.style.width = widthCount + "px";
  } else {
    clearInterval(interval);
  }

}, 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>

To observe a dynamic progress bar, utilize the setInterval() method.

If you solely rely on a for loop, there won't be any visual animation visible.

This is due to the rapid computation speed of computers, which only allows you to witness the final outcome of the for loop.

Answer 3

Answer №2

If you're interested, I decided to rewrite it using functions:

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 updateProgress = function (step, interval) {
currentWidth = Math.min(currentWidth + step, containerWidth);
write.innerHTML = Math.floor((currentWidth / containerWidth) * 100) + '%' // Display percentage
x.style.width = currentWidth + 'px'
if (currentWidth < containerWidth) setTimeout(function () {
updateProgress(step, interval)
}, interval)
}

updateProgress(8, 300) // Initiates progress

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>

Answer 4

If you're interested, I decided to rewrite it using functions:

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 updateProgress = function (step, interval) {
currentWidth = Math.min(currentWidth + step, containerWidth);
write.innerHTML = Math.floor((currentWidth / containerWidth) * 100) + '%' // Display percentage
x.style.width = currentWidth + 'px'
if (currentWidth < containerWidth) setTimeout(function () {
updateProgress(step, interval)
}, interval)
}

updateProgress(8, 300) // Initiates progress

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>

Answer 5

Answer №3

It's a bit unclear what kind of behavior you are looking for. Typically, the size of the bar changes based on certain application events (in this example, timeouts are used). Here is a sample code that might give you some insight:

 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>

Answer 6

It's a bit unclear what kind of behavior you are looking for. Typically, the size of the bar changes based on certain application events (in this example, timeouts are used). Here is a sample code that might give you some insight:

 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>

The progress bar seems to be malfunctioning

Answer №1

Answer №2

Answer №3

Similar questions

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

Create shorter nicknames for lengthy reference names within the ng-repeat loop

Customize Column Headers in Handsontable: A Quick Guide

Understanding the Significance of this Regular Expression

Creating a CSS animation to slide a div outside of its container is

Double clicking on a row value in a Bootstrap table

Struggling to break free from the confines of an overflow-hidden container in swiperjs due to

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

The JavaScript syntax dollar sign

Google Maps fails to load when triggered by the jQuery show() function

Shifting elements within Phoria.js

Tips for implementing a settimeout function in a VUEJS script

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

The webpage Page.php is failing to display the newly added content

Tips for setting discrete mapper style in cytoscapejs?

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

Steps for importing jQuery typings into TypeScript:1. First, install the jQuery

The issue of a false value not being correctly matched in Jasmine is causing problems

Similar to `util.inspect` in Node.js, Deno also has a function