Circular progress bars built with Orbit CSS
A circular progress bar is the most-requested radial component in any UI library — it’s the spinner that becomes a value, the loader that becomes a result, the “you’ve reached your goal” ring on every fitness app on the planet. Most CSS-only solutions cap out at “draw an SVG circle and animate the stroke-dasharray”. Orbit takes a different route: the progress arc is a real DOM element you can theme, label, and stack with anything else.
These four examples cover the most common patterns. All four use the same <o-progress> element under the hood — the differences are in styling and composition.
Examples
Dashed circular progress bar A segmented ring of 10 dashes that fade out as the value increases. Best for progress that should feel discrete and intentional.
Circular progress with background A solid filled arc on a darker background ring with a centered numeric label. Best for goal completion and KPI displays.
Circular progress with handle A progress arc with a draggable-looking handle at its tip. Best for sliders, range inputs, and interactive controls.
Stacked circular progress bars Three concentric rings on a dark background showing related metrics. Best for fitness, health and dashboard widgets.
Which one should I pick?
| Use case | Recommended |
|---|---|
| File upload / loader | Solid with background |
| Stepwise progress (X of N) | Dashed |
| Slider / range input | With handle |
| Multi-metric dashboard | Stacked |
Related
- Gauges — when you need a needle instead of a fill
- Knobs — interactive controls that build on
<o-progress> <o-progress>element reference- Use case: fitness and health apps