Question 45702 in CSS Question posted in
Some basic documentation can be found here.

Reverse a progress bar from it's current location – CSS

The problem: When I click the **reset **button, I would like the progress bar to reverse itself from it’s current location and go back down to 0%.

index.html

<!DOCTYPE html>
<html>

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Loader Demo</title>
  <link rel="stylesheet" href="style.css">
 <link rel="icon" type="image/png" href="favicon.png">
   
</head>

<body>
  <div id="container">
      <div id="loader">
        <div class="bar"></div>
      </div> 
      <div id="bReset">
        <input type="submit" id="reset-button" name="reset-button" value="Reset">
       <!-- <input type="submit" id="pause-button" name="pause-button" value="Pause"> -->
        <input type="submit" id="start-button" name="start-button" value="Start">
      </div>
    </div>
 <script src="script.js"></script>

</body>

</html>

style.css

#container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #loader {
        width: 300px;
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
      }
      @keyframes progress-reverse {
  from { width: 100%; }
  to { width: 0%; }
}
      #loader .bar {
        height: 100%;
        background-color: #007bff;
        animation: none;
        width: 0%;
      }
      #reset-button {
        border: none;
        background-color:  #007bff;
        color: white;
        padding: 5px 15px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 5px;
        width: 65px;
      }
      #start-button {
        border: none;
        background-color:  #007bff;
        color: white;
        padding: 5px 15px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 5px;
        width: 65px;
      }
      @keyframes progress {
        0% {width: 0%; background: #A1F5FF;}
        100% {width: 100%; background: #007bff;}
      }

script.js

const sb = document.querySelector('#start-button');
const rb = document.querySelector('#reset-button');
const pBar = document.querySelector('.bar');

let isPaused = false;

sb.addEventListener('click', () => {
if (!isPaused) {
    sb.value = 'Pause';
    pBar.style.animation = 'none';
    pBar.style.animation = 'progress 3s linear infinite';
     pBar.style.animationPlayState = 'running';
}else {
    sb.value = 'Start';
    pBar.style.animationPlayState = 'paused'
    }
isPaused = !isPaused;
});

// this is the part I am having issues with
rb.addEventListener('click', () => {
  isPaused = false;
  sb.value = 'Start';
  pBar.style.animationPlayState = 'paused';
  const computedStyle = window.getComputedStyle(pBar);
  const barWidth = parseFloat(computedStyle.getPropertyValue('width'));
  const remainingDuration = (3 / 100) * barWidth;
  pBar.style.animation = `progress-reverse ${remainingDuration}s linear forwards`;
  pBar.style.width = `${barWidth}px`;

});`

I tried using the "linear reverse" , I tried creating a new separate keyframe class just for the reverse. When it did work, clicking reset resulted in the progress bar going to 100% and going reverse from there and not from where the bar was at the time.

Tags:

2

Answers


  1. 0

    Just don’t make the progress-reverse animation start from 100% width.

    @keyframes progress-reverse {
    to { width: 0%; }
}
    Login or Signup to reply.
  2. 0

    Since you are controlling the animation with JavaScript anyway, you could consider using the Web Animations API to have more control and read more information about the animation.

    const sb = document.querySelector('#start-button');
const rb = document.querySelector('#reset-button');
const pBar = document.querySelector('.bar');

let animation;

sb.addEventListener('click', () => {
  if (!animation) {
    sb.value = 'Pause';
    animation = pBar.animate(
      [
        { transform: 'scaleX(0)', backgroundColor: '#A1F5FF' },
        { transform: 'scaleX(1)', backgroundColor: '#007bff' },
      ],
      {
        duration: 3000,
        iterations: Infinity,
        easing: 'linear',
      },
    );
  } else if (animation.playbackRate <= 0) {
    animation.playbackRate = 1;
    animation.play();
  } else {
    sb.value = 'Start';
    animation.pause();
  }
});

// this is the part I am having issues with
rb.addEventListener('click', () => {
  sb.value = 'Start';
  if (animation && animation.playbackRate >= 0) {
    animation.reverse();
  }
});
    #container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loader {
  width: 300px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

#loader .bar {
  height: 100%;
  background-color: #007bff;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
}

#reset-button {
  border: none;
  background-color: #007bff;
  color: white;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5px;
  width: 65px;
}

#start-button {
  border: none;
  background-color: #007bff;
  color: white;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5px;
  width: 65px;
}
    <div id="container">
  <div id="loader">
    <div class="bar"></div>
  </div>
  <div id="bReset">
    <input type="submit" id="reset-button" name="reset-button" value="Reset">
    <!-- <input type="submit" id="pause-button" name="pause-button" value="Pause"> -->
    <input type="submit" id="start-button" name="start-button" value="Start">
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search