WebComponents:Progress
lastmod 2026-11-10created 2023-11-232 edits
WebComponents:Progress is a page that collects ways to build a progress bar, which shows progress on a web page, with HTML and CSS. In particular, it covers an example that uses CSS animation to implement an indeterminate progress bar, whose bar moves endlessly left to right when the total amount of work is unknown. It works with only @keyframes and the position property, without JavaScript.
Example
<div class="indeterminate-progress-bar">
<div class="indeterminate-progress-bar__progress"></div>
</div>
.indeterminate-progress-bar {
/* Color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 0.5rem;
position: relative;
overflow: hidden;
}
.indeterminate-progress-bar__progress {
/* Color */
background-color: #3b82f6;
/* Rounded border */
border-radius: 9999px;
/* Absolute position */
position: absolute;
bottom: 0;
top: 0;
width: 50%;
/* Move the bar infinitely */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: indeterminate-progress-bar;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}