How to make progress bar move slowly by JavaScript

Question

As I am increasing its width by 10%, it will apply suddenly, I want it to have some smooth movement.

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container  -->
  <div id="barHolder">
    <div id="bar"></div>
  </div>
  <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>

What do you mean move slowly? Aren't you able to do this with value of width variable in JS? — Lazar Nikolic, Aug 31 '18 at 11:42
Oh, I see what you mean. You can use setInterval function to make your progress bar go smoothly without this jumping effect. — Lazar Nikolic, Aug 31 '18 at 11:44
@LazarNikolic as i am increasing its width by 10%, it wil apply suddenly, i want it to have some smooth movement. — jsduniya, Aug 31 '18 at 11:44

vfle · Accepted Answer · 2018-08-31T12:11:40.920

6

By adding to the desired element the property transition (in your case #bar), we can achieve the smoothing effect you seek for with CSS. That will result in a smoother experience, than accomplishing the same effect with Javascript.

transition: width 2s;

(Adds a smoothing of 2s for the transition of width)

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

Learn more about transitions.

But to fully answer the question to achieve the same results with JavaScript (only) i would use a timeout to step to small intervals of the real step (If we wanted to transition by 10% for 1 second i'd split it to 0.1 per 1%)

But i strongly advice to use the best technology for each solution and not try to achieve something with a specific technology without a really good reason.

edited Aug 31 '18 at 12:11

answered Aug 31 '18 at 11:47

vfle

1,355
7
18

That's working perfectly with CSS, Can i achieve same thing with JS ? – jsduniya Aug 31 '18 at 11:49
1

CSS animations are smoother, and should be used whenever possible. JS was used in the past to achieve the animations, before there was browser support for animations. Any reasons you don't want CSS? – vfle Aug 31 '18 at 11:51
css is smoother as you said its correct. Just out of curiosity how could we do with js. – jsduniya Aug 31 '18 at 11:55
1

https://css-tricks.com/controlling-css-animations-transitions-javascript/ – vfle Aug 31 '18 at 11:56
@SidBhalke updated my answer to include the by JS way. – vfle Aug 31 '18 at 12:12

score 5 · Answer 2 · edited Aug 31 '18 at 12:09

I don't understand your question, because you do not this, but I understand you need this

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
  transition: width 2s; /* Add this */
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <title>Progress bar</title>
  <link rel="stylesheet" type="text/css" href="bar.css">
  <script type="text/javascript" src="bar.js"></script>
</head>
<body>
  <!--- progress bar container  -->
  <div id="barHolder">
    <div id="bar"></div>
  </div>
  <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>

How to make progress bar move slowly by JavaScript

2 Answers2