webdevpuneet.com

Related Snippets

73 in Loaders category
53–58 of 60

Indeterminate Bar

Wave Loader

Skeleton Card Grid

Segmented Progress

Typing Indicator

Circular Countdown

Indeterminate Bar — Loading Progress Bar HTML CSS JS

Indeterminate Bar · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsCSS AnimationLoading States

Copy & paste

Source Code

<div class="ib-stage">
  <div class="ib-demo">
    <span class="ib-label">Slim</span>
    <div class="ib-bar"><div class="ib-track ib-slim"><div class="ib-fill"></div></div></div>
  </div>
  <div class="ib-demo">
    <span class="ib-label">Two-dash</span>
    <div class="ib-bar"><div class="ib-track"><div class="ib-fill ib-a"></div><div class="ib-fill ib-b"></div></div></div>
  </div>
  <div class="ib-demo">
    <span class="ib-label">Striped</span>
    <div class="ib-bar"><div class="ib-track"><div class="ib-stripes"></div></div></div>
  </div>
  <div class="ib-demo">
    <span class="ib-label">Determinate</span>
    <div class="ib-bar"><div class="ib-track"><div class="ib-det" id="ibDet"></div></div></div>
  </div>
  <button type="button" class="ib-btn" id="ibToggle">Pause</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Four bar styles
Sliding fill, two-dash Material, flowing stripes, and a determinate bar.
CSS-only indeterminate
The three loops run entirely on @keyframes — no JavaScript ticking.
Accelerate-and-stretch motion
The sliding fill varies width within the keyframes for the Material feel.
Striped flow
An animated repeating-gradient background-position for the barber-pole look.
Determinate with transition
A JS-set width smoothed by a CSS transition for measurable progress.
Pause / resume all
One class toggles animation-play-state across every bar, freezing in place.
Slim variant
A thinner track option for tight layouts.
Independent & no library
Copy any single bar; plain HTML/CSS/JS with zero dependencies.

About this UI Snippet

Indeterminate Progress Bars — Sliding, Two-Dash, Striped, and Determinate

Screenshot of the Indeterminate Bar snippet rendered live

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."

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSFour progress bars render: sliding, two-dash, striped, and a determinate bar.
  2. 2
    Pick a styleCopy the single bar whose look fits your UI — each is self-contained.
  3. 3
    Pause and resumeClick the button to freeze all animations via animation-play-state and resume them.
  4. 4
    Use indeterminate when unknownShow a looping bar while a request is in flight with no measurable total.
  5. 5
    Drive the determinate barSet the determinate fill width from your real progress (loaded/total).
  6. 6
    Restyle itChange the gradients, track height, or timing to match your theme.

Real-world uses

Common Use Cases

App and page loading
Show that activity is happening when the amount remaining is unknown, pairing with a top loading bar for route changes.
Form and request submission
Display an indeterminate bar inside a loading button or under a form, until the server finally responds.
Upload and download phases
Use the determinate bar with real percentages, as in an upload progress component, when size is actually known.
Background work indicators
Indicate ongoing tasks of unknown length, with a pause toggle that stops all three CSS-only loops at once.
Loader motion reference
Study the accelerate-and-stretch sliding fill, the two-dash Material pattern and the barber-pole stripes, all built from @keyframes alone.
Related: Concentric Rings Progress Loader
See the Concentric Rings Progress Loader for a related loaders pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Use an indeterminate bar when you cannot measure how much work remains — a request in flight, a task with no known total — so it just communicates "something is happening." Use a determinate bar when you can compute progress (bytes loaded ÷ total, steps done ÷ steps). Prefer determinate whenever possible and switch to it as soon as a total is known, because a real percentage reassures users far more than an endless loop.

CSS @keyframes animations run on the browser's compositor, stay smooth even when the main thread is busy (which is common during loading), and need no JavaScript loop nudging styles each frame. For a continuous indeterminate loader, that is both more efficient and more reliable than a setInterval/requestAnimationFrame ticking the width — the JS here only drives the determinate bar and the pause toggle.

A button toggles a class on the container that applies animation-play-state: paused to every animated bar. Unlike removing the animation, paused freezes each bar exactly where it is and resumes from that point when unpaused — no jump. The determinate simulation also checks the paused flag so it stops advancing too. It is the clean, jump-free way to pause CSS animations.

Two absolutely-positioned bars animate their left and right insets with offset timing and easing so one shoots across, then the second follows, creating the familiar two-dash chase. It is purely CSS keyframes on each bar with a delay on the second. Copy that one block (the .ib-a/.ib-b rules and keyframes) if that is the style you want.

The indeterminate bars are pure CSS, so they drop in as-is — just render the markup. For the determinate bar, hold the percentage in state and bind the fill width (style width), updating it from your real progress. For pause, toggle the class from state. The animations are framework-agnostic; only the determinate width and pause flag move into the framework.