CODEWITHSUNDEEP
javascripthtmlcssprogress-bar
jsduniya
jsduniya

Reputation: 2474

How to make progress bar move slowly by JavaScript

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>

Upvotes: 2

Views: 4346

Answers (2)

vfle
vfle

Reputation: 1485

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.

Upvotes: 6

Jose Sanchez Robles
Jose Sanchez Robles

Reputation: 107

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>

Upvotes: 5

Related Questions