Indeterminate Bar — Loading Progress Bar HTML CSS JS

An indeterminate progress bar shows that work is happening when you cannot measure how much is left — the looping animation that says "loading" without a percentage. This snippet collects four progress-bar styles in plain HTML and CSS, plus a determinate bar driven by JavaScript and a pause control, so you can pick the right one for any loading state — no library.

Four loaders, pure CSS

The first three bars are animation-only, no JavaScript: a single sliding fill that grows and shrinks as it sweeps across (the modern Material look), the classic two-dash Material indeterminate (two bars chasing each other with offset timing), and flowing diagonal stripes (a repeating gradient whose background-position animates). Each is a different visual idiom for "indeterminate," and each is achieved entirely with @keyframes on a small element inside an overflow: hidden track. Having them side by side makes it easy to choose the style that fits your UI.

Why animate position and transform, not width repeatedly

The bars animate left/right or background-position in tight loops; the sliding fill also varies its width within the keyframes to get the accelerate-and-stretch feel. Keeping the motion in CSS keyframes means it runs on the compositor, stays smooth, and needs no JavaScript ticking — the right way to do a continuous loading animation versus a JS interval nudging styles every frame.

A determinate bar for when you can measure

The fourth bar is determinate: its width is set from JavaScript to a real percentage with a CSS transition smoothing each change. The demo simulates progress that climbs and restarts, but in practice you would set the width from an upload's loaded/total or a task's completed count. Showing both kinds together highlights the key decision: use indeterminate when you cannot know the total, determinate when you can — and switch to determinate as soon as you can, since a real percentage reassures users more.

One pause control for all

A single button toggles a class that sets animation-play-state: paused on every animated bar, freezing them in place, and the determinate simulation respects the same paused flag. Pausing via animation-play-state (rather than removing the animation) keeps each bar exactly where it stopped and resumes seamlessly — the clean way to pause CSS animations.

Drop-in and adaptable

Each bar is independent, so copy just the style you need. Recolour the gradients, change the track height (a slim variant is included), or adjust the timing. It is a clear, dependency-free reference for indeterminate-loader techniques and the indeterminate-versus-determinate choice every loading UI faces. Accessibility is worth adding on top of the visuals: pair any of these tracks with role="progressbar", and for the determinate bar set aria-valuenow/aria-valuemin/aria-valuemax from the same percentage driving the width so assistive tech reports real progress; the indeterminate bars should omit aria-valuenow entirely, which is the ARIA convention for signalling "busy, but no measurable value."