Javascript/CSS: donation progress bar with intervals works incorrectly-CodePudding

I am a newbie in Javascript. I have created a 'donation progress bar' with intervals. The bar is activated by a button; seems it works but incorrectly. I would like that, once activated, the bar starts from beginning to the end in a fluid movement; instead it starts at 1/4 of its width and it goes with intervals.. also appears a border radius to the bar itself while progressing and I can not remove it. Any idea how I can fix this? Thanks in advance!

function move() {
  let elem = document.getElementById("progress-bar");
  let stepValue = 0;
  let id = setInterval(frame, 500);

  function frame() {
    if (stepValue >= 100) {
      clearInterval(id);
    } else {
      elem.style.width = stepValue   10   "%";
      elem.innerHTML = stepValue   10   "%";
      stepValue = stepValue   10;
    }
  }
}

body{
  max-width: 75%;
  margin: auto;
}

.progress-goals {
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}

.progress-goals h3 {
  display: inline-block;
}

.progress-goals:last-child {
  flex: 1;
}

.progress-bg {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 0px;
  height: 78px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 0 10px #ccc;
  -webkit-box-shadow: inset 0 0 10px #ccc;
  box-shadow: inset 0 0 10px #ccc;
}

.goal-bar {
  background-color: rgb(58, 58, 58);
  width: 5px;
  height: 78px;
  border-radius: 15px;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 0px;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 18%,
    rgba(28, 53, 120, 0.8),
    rgba(220, 24, 27, 0.8)
  );
  position: absolute;
  overflow: hidden;
  font-size: 15px;
  text-align: center;
  color: white;
  transition: all 700ms ease;
}


.progress-btn-container {
  display: grid;
  place-items: center;
  height: 50px;
}

.progress-btn {
  /* display: block; */
  cursor: pointer;
  margin: auto;
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.progress-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 9px;
  border: 1px solid #555;
}

<div >

  <h3 >$0</h3>
  <h3 >$1,000</h3>
  <h3 >$10,000</h3>
  <h3 >$100,000</h3>

 </div>

   <div  id="progress-bg">

   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
     
 <div  id="progress-bar">
 </div>        
     
</div>
 
 <div >
  <button  onclick="move()">total donated</button>
 </div>

CodePudding user response：

You can increase the setInterval method's frequency by reducing the interval time to a smaller value and also adjust the stepValue variable accordingly to smoothen the progressbar.

See the following code:

function move() {
  let elem = document.getElementById("progress-bar");
  let stepValue = 0;
  let id = setInterval(frame, 50);

  function frame() {
    if (stepValue >= 100) {
      clearInterval(id);
    } else {
      elem.style.width = stepValue   1   "%";
      elem.innerHTML = stepValue   1   "%";
      stepValue = stepValue   1;
    }
  }
}

body {
  max-width: 75%;
  margin: auto;
}

.progress-goals {
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}

.progress-goals h3 {
  display: inline-block;
}

.progress-goals:last-child {
  flex: 1;
}

.progress-bg {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 0px;
  height: 78px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 0 10px #ccc;
  -webkit-box-shadow: inset 0 0 10px #ccc;
  box-shadow: inset 0 0 10px #ccc;
}

.goal-bar {
  background-color: rgb(58, 58, 58);
  width: 5px;
  height: 78px;
  border-radius: 15px;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 0px;
  background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 18%, rgba(28, 53, 120, 0.8), rgba(220, 24, 27, 0.8));
  position: absolute;
  overflow: hidden;
  font-size: 15px;
  text-align: center;
  color: white;
  transition: all 700ms ease;
}

.progress-btn-container {
  display: grid;
  place-items: center;
  height: 50px;
}

.progress-btn {
  /* display: block; */
  cursor: pointer;
  margin: auto;
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.progress-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 9px;
  border: 1px solid #555;
}

<div >

  <h3 >$0</h3>
  <h3 >$1,000</h3>
  <h3 >$10,000</h3>
  <h3 >$100,000</h3>

</div>

<div  id="progress-bg">

  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>

  <div  id="progress-bar">
  </div>

</div>

<div >
  <button  onclick="move()">total donated</button>
</div>

Here I have set the interval to 50ms and the stepValue is increased by 1% at every interval.

CodePudding user response：

function move() {
    let bar = document.getElementById("progress-bar");
    let donations = 0;
    bar.style.width = `0%`;

    setInterval(function () {
        if (donations < 100000) {
            donations  = 1;
            bar.style.width = `${(donations/100000) * 100}%`;
        }
    }, 1000);
}

This should give you a more accurate increase of the progress bar. However, your goal bars won't reflect it properly because the scaling is off.

If you want the goal bars to be more accurate, you can try moving them left relative to the parent using percentages (with absolute positioning). For example, 50% of the progress bar would represent 50,000.