Progress

µProgress adds 11 color variants to the native <progress> element. It uses accent-color and vendor-specific pseudo-elements for cross-browser compatibility.

Usage

Apply a color class directly on a <progress> element to change the bar color. Without a color class, the default progress styling applies.

75%

<progress class="progress-primary" value="75" max="100">75%</progress>

The text content inside <progress> serves as a fallback for browsers that do not support the element.

Color variants

11 color classes are available, matching the µCSS color roles:

Primary (75%) 75% Secondary (60%) 60% Tertiary (45%) 45% Contrast (90%) 90% Spark (40%) 40% Accent (70%) 70% Pop (55%) 55% Success (80%) 80% Info (50%) 50% Warning (35%) 35% Error (20%) 20%

<label>Primary (75%)
    <progress class="progress-primary" value="75" max="100">75%</progress>
</label>
<label>Secondary (60%)
    <progress class="progress-secondary" value="60" max="100">60%</progress>
</label>
<label>Tertiary (45%)
    <progress class="progress-tertiary" value="45" max="100">45%</progress>
</label>
<label>Contrast (90%)
    <progress class="progress-contrast" value="90" max="100">90%</progress>
</label>
<label>Spark (40%)
    <progress class="progress-spark" value="40" max="100">40%</progress>
</label>
<label>Accent (70%)
    <progress class="progress-accent" value="70" max="100">70%</progress>
</label>
<label>Pop (55%)
    <progress class="progress-pop" value="55" max="100">55%</progress>
</label>
<label>Success (80%)
    <progress class="progress-success" value="80" max="100">80%</progress>
</label>
<label>Info (50%)
    <progress class="progress-info" value="50" max="100">50%</progress>
</label>
<label>Warning (35%)
    <progress class="progress-warning" value="35" max="100">35%</progress>
</label>
<label>Error (20%)
    <progress class="progress-error" value="20" max="100">20%</progress>
</label>

Class	Color variable
`.progress-primary`	`--mu-primary`
`.progress-secondary`	`--mu-secondary`
`.progress-tertiary`	`--mu-tertiary`
`.progress-contrast`	`--mu-contrast`
`.progress-spark`	`--mu-spark`
`.progress-accent`	`--mu-accent`
`.progress-pop`	`--mu-pop`
`.progress-success`	`--mu-success`
`.progress-info`	`--mu-info`
`.progress-warning`	`--mu-warning`
`.progress-error`	`--mu-error`

Various values

The value attribute controls the fill level. Set max to define the scale (typically 100).

0% 25% 50% 100%

<progress class="progress-primary" value="0" max="100">0%</progress>
<progress class="progress-success" value="25" max="100">25%</progress>
<progress class="progress-info" value="50" max="100">50%</progress>
<progress class="progress-primary" value="100" max="100">100%</progress>

Indeterminate

Omit the value attribute to create an indeterminate progress bar (animated loading indicator):

<progress class="progress-primary">Loading...</progress>

Cross-browser implementation

Each color variant sets three properties for full browser support:

Property	Target
`accent-color`	Modern browsers
`::-webkit-progress-value`	Chrome, Safari
`::-moz-progress-bar`	Firefox

CSS classes reference

Class	Description
`.progress-primary`	Primary color progress bar
`.progress-secondary`	Secondary color progress bar
`.progress-tertiary`	Tertiary color progress bar
`.progress-contrast`	Contrast color progress bar
`.progress-spark`	Spark (lighter contrast) progress bar
`.progress-accent`	Accent color progress bar
`.progress-pop`	Pop (lighter accent) progress bar
`.progress-success`	Success (green) progress bar
`.progress-info`	Info (blue) progress bar
`.progress-warning`	Warning (orange/yellow) progress bar
`.progress-error`	Error (red) progress bar

Accessibility

The <progress> element is natively accessible and announced by screen readers.
Include fallback text content inside the element (e.g., 75%) for older browsers.
Wrap progress bars inside <label> elements to provide descriptive context.