Skip to content
Orbit

Circular progress bar with background — CSS example

This is the workhorse circular progress bar — the one you’ll use for file uploads, goal completion, “X% of storage used” displays, and basically any situation where you need to show “progress against a known maximum” without dressing it up. The darker background ring is what makes it work: it gives the user a visual sense of the remaining portion, not just the completed one.

The example uses a single <o-progress> element with shape="circle" and a value attribute. The background ring color is set via the --o-back-fill CSS variable, and the fill color via --o-fill. That’s the entire styling layer.

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

How it works

Section titled “How it works”
  • <o-progress value="60" shape="circle"> does the heavy lifting. The value attribute drives the fill, shape="circle" gives the segment rounded ends (the parent orbit’s --o-range controls whether the span is a full circle or a partial arc), and the styling comes from CSS variables.
  • --o-back-fill is the unfilled portion of the ring. Setting it to a darker shade of the same hue creates the depth effect — it reads as “progress bar” instead of “decoration”.
  • The center label is a satellite at orbit-0 containing a capsule. Capsules force their text to render upright regardless of the satellite’s rotation, which matters when you start rotating the parent.
  • orbit-4 sets the ring radius. Smaller orbits (orbit-2, orbit-3) make the ring tighter; larger ones make it more imposing.

Customization

Section titled “Customization”

Animate the value with a CSS transition by setting one on the <o-progress> itself — Orbit applies its fill via standard CSS variables, so the transition propagates:

o-progress {
  transition: --o-fill 0.4s;
}

Make it color-shift based on completion by toggling a class:

const pct = value;
progress.setAttribute('value', pct);
progress.style.setProperty('--o-fill',
  pct < 30 ? 'var(--o-red)' :
  pct < 70 ? 'var(--o-orange)' :
              'var(--o-green)'
);

Use it as a countdown by binding value to (timeRemaining / totalTime) * 100 and updating it on a timer.

Section titled “Related”

Use this in your project

Section titled “Use this in your project”

Install Orbit and the markup above is the entire component.