<div class="progress"></div>
:root {
--progress: 0%;
}
.progress {
position: relative;
width: 600px;
height: 20px;
margin: auto;
border: none;
border-radius: 1000px;
margin: auto;
background: #9ca3af;
}
.progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: red;
border-radius: 1000px;
width: var(--progress);
transition: all ease 0.5s;
}
let progress = 0;
const progressBar = document.querySelector(".progress");
const style = progressBar.style;
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);
const interval = window.setInterval(() => {
if (progress >= 100) {
clearInterval();
return;
}
progress = progress + 10;
progressBar.setAttribute("aria-valuenow", progress);
style.setProperty("--progress", progress + "%");
}, 1000);
const clearInterval = () => {
window.clearInterval(interval);
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.