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.
>Solution :
Just don’t make the progress-reverse animation start from 100% width.
@keyframes progress-reverse {
to { width: 0%; }
}