Progress Bar
No library Beginner
An indeterminate progress bar — a gradient shimmer slides across a pill-shaped track from left to right on loop. Pure CSS, no dependencies.
An indeterminate progress bar — a gradient shimmer slides across a pill-shaped track from left to right on loop. Pure CSS, no dependencies.
Goal: Create a "Progress Bar" indeterminate loader animation.
Visual behavior: A 180×6px pill-shaped track (low-opacity white background). A 55%-wide inner bar slides from left to right repeatedly — it enters from the left edge and exits on the right, then loops. The bar itself is a transparent-to-indigo-to-purple-to-transparent linear gradient, so it fades in and out at both edges for a smooth shimmer effect.
Technique: The outer element is position:relative with overflow:hidden. The inner span is position:absolute, animating its "left" property from -60% to 120% over ~1.6s ease-in-out infinite. The gradient creates natural soft edges without opacity tricks.
Accessibility: role="progressbar" with aria-valuemin/max on the wrapper (no aria-valuenow = indeterminate). Animation disabled under prefers-reduced-motion; bar shown at a static centered position.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.