progress & meter
Thin square bars. Meter grades through the status roles — the browser decides which.
Example
Basic usage
<progress max="100" value="33"></progress>
<meter min="0" max="100" low="60" high="85" optimum="30" value="74"></meter>API
Both controls use native HTML attributes and behavior. Mica adds the thin-bar presentation and status colors; it adds no attributes.
Native progress attributes
| Name | Type | Default | Description |
|---|---|---|---|
max | positive number | 1 | Sets the total required work. |
value | number | indeterminate | Sets completed work. Omit it for native indeterminate progress. |
Native meter attributes
| Name | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The measured value. |
min | number | 0 | The lower bound of the measured range. |
max | number | 1 | The upper bound of the measured range. |
low | number | min | The upper boundary of the low range. |
high | number | max | The lower boundary of the high range. |
optimum | number | range midpoint | Indicates which part of the range is optimal; Mica maps meter grades to status colors. |
Accessibility
Use surrounding text or an accessible name to identify what each native control measures. Use progress for task completion and meter for a scalar value within a known range.