Segmented Progress

A single editorial determinate progress bar — a solid rose fill with a soft glassy top-highlight sitting in a calm card, with an understated tabular percent, fully token-driven and design-system agnostic.

An industrial hazard-tape progress bar — a barber-pole striped fill inside a recessed service-bay well, faint diagonal safety stripes on the backdrop, a mono percent readout, and one replay control for the simulated transfer. Token-driven and design-system adaptive.

A soft, organic upload progress bar whose gradient, typography, card shape, elevation, surfaces and light/dark themes follow the active design system. The fill breathes with a gentle opacity pulse and animates only opacity and transform.

A calm, standalone indeterminate progress bar — an endless sliding sweep on a soft track with a quiet loading status and a breathing accent dot, animating only transform and opacity, fully token-driven and design-system agnostic.