progress()
The progress() CSS function returns a ratio for the relative position of one value between two other values, clamped between 0 and 1. You can use it to interpolate a value for other calculations. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The progress() CSS function returns a ratio for the relative position of one value between two other values, clamped between 0 and 1. You can use it to interpolate a value for other calculations. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 138 | 138 | | 26 | 138 | 26 | |
Syntax
.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.
Related links
Powered by web-features