Progress
Material Design 3 linear and circular progress indicators and a usage meter, as web components.
- 3.1 KB gzipped
- @lit-material/progress 0.2.0
- Renders on the server
Example
Progress Indicators
Linear + circular, one package (@lit-material/progress).
Usage meter
lit-material-usage-meter shows how much of a limit is used. It warns at 80% and turns critical at
95% or over the limit, in words as well as colour.
CPU
1.5 of 4 cores
Memory
6.6 of 8 GiB · near limit
Disk
21 of 20 GiB · over limit
Public IPs
2, no limit
Install
npm install @lit-material/progress @lit-material/tokensimport "@lit-material/progress";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-circular-progress>
Material Design 3 circular progress indicator.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | 0 | |
max | max | number | 1 | |
indeterminate | indeterminate | boolean | false | |
size | size | number | 48 | Diameter in pixels. |
strokeWidth | stroke-width | number | 4 |
CSS parts
| Part | Description |
|---|---|
track | The background ring. |
indicator | The filled arc. |
<lit-material-linear-progress>
Material Design 3 linear progress indicator.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | 0 | |
max | max | number | 1 | |
indeterminate | indeterminate | boolean | false |
CSS parts
| Part | Description |
|---|---|
track | The background track. |
indicator | The filled indicator bar(s). |
<lit-material-usage-meter>
How much of a limit is used: a labelled bar with the value and limit in text, e.g. a quota ("CPU 3.2 of 4 cores") or disk ("12 of 20 GiB").
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | "" | What is measured, e.g. "CPU". |
value | value | number | 0 | Amount used. |
max | max | number | 0 | The limit; 0 means none. |
unit | unit | string | "" | Unit after the numbers, e.g. "GiB" or "cores". |
warning | warning | number | 0.8 | Fraction of max from which the meter warns. |
critical | critical | number | 0.95 | Fraction of max from which the meter is critical. |
format | property only | (n: number) => string | none | Formats both numbers; default: up to two decimals in the page's locale. |
level | level | UsageLevel | "" | warning, critical or "", from the value; reflected for styling. |
CSS parts
| Part | Description |
|---|---|
label | The label. |
value | The "used of limit" text. |
bar | The track. |
indicator | The filled part. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-usage-meter-color | The bar below warning (default --md-sys-color-primary). |
--lit-material-usage-meter-warning-color | The bar from warning on. |
--lit-material-usage-meter-critical-color | The bar from critical on (default --md-sys-color-error). |
--lit-material-usage-meter-track-color | The empty track (default --md-sys-color-surface-container-highest). |
--lit-material-usage-meter-height | Bar thickness (default 8px). |