Dark mode progress bar

Semantic progress with cross-browser pseudo-element styling and a readable track on dark surfaces.

Export72%

Widely Supported

colorno-js

Quick implementation

progress.dmpb-bar {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  border: none;
  background: oklch(0.28 0.02 260 / 0.9);
}
progress.dmpb-bar::-webkit-progress-value {
  background: linear-gradient(90deg, oklch(0.62 0.16 250), oklch(0.72 0.14 280));
}

Prompt this to your LLM

Semantics, styling, and indeterminate state.

You are styling a native <progress> element for dark dashboards.

Goal: Visible track, vibrant but not neon fill, and correct labels for screen readers.

Technical constraints:
- Style both WebKit and Firefox pseudo-elements.
- Use oklch in gradients; avoid raw hex in the snippet.
- Keep height compact for dense tables; radius fully rounds the bar.
- Provide an accessible name via aria-label or aria-labelledby.

Framework variant A: static HTML + CSS.
Framework variant B: React — value + max from props; set indeterminate when unknown.

Edge cases:
- Indeterminate: browsers vary — document that styling may be limited without extra markup.
- prefers-reduced-motion: if you add stripe animation, disable it under reduced motion.
- Windows high-contrast: ensure track border remains visible.

Return HTML + CSS.

Why this matters in 2026

Progress bars still communicate long-running jobs. Using the native element preserves semantics for assistive tech while CSS handles the dark-theme polish.

The logic

We separate the track (background on the element) from the value (pseudo-elements). The gradient reads well on charcoal tracks without flashing pure white.

Accessibility & performance

Pair the bar with a visible percentage or status text for users who don’t rely on the visual fill alone. Native progress is GPU-friendly—avoid animating width on a div every frame.