<div class="progress-container">
<div class="progress"></div>
</div>
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #121212;
}
.progress-container {
height: 0.8rem;
width: 32rem;
border-radius: 0.4rem;
background: #000;
}
.progress-container .progress {
height: 100%;
width: 0;
border-radius: 0.4rem;
background: #ff4754;
transition: width 0.4s ease;
}
const progressbar = document.querySelector(".progress");
const changeProgress = (progress) => {
progressbar.style.width = `${progress}%`;
};
/* change progress after 1 second (only for showcase) */
setTimeout(() => changeProgress(22), 1000);
setTimeout(() => changeProgress(45), 2000);
setTimeout(() => changeProgress(85), 4600);
setTimeout(() => changeProgress(98), 5266);
setTimeout(() => changeProgress(100), 8000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.