CSS Animation Example: Filling Progress Bar

The "Filling Bar" is a determinate progress indicator, giving users a clear estimate of how much longer a task (like a file upload) will take.

This animation is quite straightforward in that it animates the width property of the inner bar from 0% to 100%. To make it feel more organic rather than a strictly linear crawl, we use @keyframes with uneven steps to simulate natural pauses in network traffic. Furthermore, we apply animation-fill-mode: forwards so the bar remains full when the animation completes, rather than resetting to zero.

Here is the code to create the Filling Bar animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.progress-container {
    width: 300px;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #28a745;
    width: 0%;
    animation: fill-bar 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fill-bar {
    0% { width: 0%; }
    40% { width: 30%; } /* Simulate a pause in loading */
    60% { width: 50%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        /* Optional: Still show progress, but snap in large chunks rather than a smooth slide */
        /* Note: For a real progress bar driven by JS, you'd just use steps() or transition: none */
        animation-timing-function: steps(4, end); 
    }
}
</style>

View Output

Accessibility Considerations

Unlike infinite spinners, a progress bar has a concrete destination. Disabling it completely using the prefers-reduced-motion media query would hide important information from the user regarding the task's status.

Instead of removing the animation, we can change its nature. By using the steps() timing function, the bar will instantly jump forward in discrete chunks, rather than smoothly (and potentially distractingly) gliding across the screen. We do this because smooth transitions can cause discomfort for some people (like those with vestibular disorders).

Here's what we used in the above example:


@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        /* Snap the progress in large chunks rather than a smooth slide */
        animation-timing-function: steps(4, end); 
    }
}