← Back to gallery
CSS

Native <progress> Variants

A project-authored CSS progress showcase built on top of the native <progress> element with determinate fill, indeterminate sheen, and striped barber-pole variants sharing one semantic shell.

Duration
3s
Resolution
1440×900
Format
CSS
progress-bardeterminateindeterminatestripedrepeating-gradient

Progress / native / striped

Native <progress> variants

Reimplements progress bar skins on top of the native <progress> element so determinate, indeterminate, and striped variants all share the same semantic shell while each variant layers its own decorative skin.

determinate fill — 64%
Deploy progress

value + max · scoped skin

Determinate Fill

A semantic <progress value max> keeps assistive tech in sync while an appearance-reset skin paints a single-color fill so the percentage still reads at a glance.

<progress value="64" max="100">

  • determinate
  • native semantics
  • appearance reset
Syncing workspace

value removed · looping highlight

Indeterminate Sweep

Dropping the value attribute flips the element into indeterminate state. A secondary highlight layer loops across the track so users see activity without a known percentage.

<progress max="100"> // no value

  • indeterminate
  • :indeterminate
  • looping sheen
Rendering frames

repeating-linear-gradient · barber pole

Striped Fill

The determinate skin layers a repeating diagonal gradient over the fill. A slow translation keeps the stripes moving so the bar reads as active even when the value holds.

<progress value="42" max="100"> + stripe overlay

  • striped
  • repeating gradient
  • active progress

Skin inspector

Determinate Fill

Deploy progress
Markup
<progress value="64" max="100">
State
64% of 100

value and max drive both the visual fill and the announced percentage. The skin only restyles; it never swaps the native element for a div.

Live controls

css
<progress value="64" max="100">

.progress-bar {
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  background: rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar::-webkit-progress-value {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.92), rgba(52, 211, 153, 0.95));
}