progress()
The progress() CSS function returns a <number> value representing the position of one value (the progress value) relative to two other values (the progress start and end values).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 138 | 138 | | 26 | 138 | 26 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.bar {
--value: 75;
width: calc(progress(var(--value), 0, 100) * 100%);
}Live demo
Use cases
-
Use progress()
Use progress() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply progress() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test progress() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using progress() does not make content harder to perceive, understand, or operate in assistive contexts.