Progress
<quiet-progress>
Progress bars represent the completion status of a request or task.
<quiet-progress label="Downloading" value="50"> 50% </quiet-progress>
Examples Jump to heading
Adding a label Jump to heading
Labels aren't displayed in the progress bar, but they're required for assistive devices such as screen
readers. You can add a label using the label attribute.
<quiet-progress label="Progress" value="50"></quiet-progress>
Showing content Jump to heading
Slot in some text to show content in the progress bar's indicator.
<quiet-progress label="Progress" value="75">75%</quiet-progress>
Progress rings Jump to heading
Set the type attribute to ring to show progress in the shape of a ring.
<quiet-progress label="Completion" appearance="ring" value="50"> 50% </quiet-progress>
Indeterminate progress Jump to heading
When the completion status can't be determined, the progress bar is considered indeterminate. Add the
indeterminate attribute for tasks whose progress can't be reported.
<quiet-progress label="Waiting for response" indeterminate></quiet-progress> <br> <quiet-progress label="Waiting for response" appearance="ring" indeterminate></quiet-progress>
Changing the size Jump to heading
Use --track-size property to change the track size. For progress rings, use the
--diameter custom property to change the size of the ring.
<quiet-progress label="Progress" value="50" style="--track-size: 10px;" > </quiet-progress> <br> <quiet-progress label="Progress" value="50" style="--track-size: 60px; font-size: 1.5rem;" > Loading </quiet-progress> <br> <quiet-progress appearance="ring" value="50" style="--track-size: 4px; --diameter: 100px;" > 50% </quiet-progress>
Changing the colors Jump to heading
Use the --track-color custom property to change the progress bar's track color. Use the
--indicator-color custom property to change the color of the progress indicator.
<quiet-progress style="--track-color: mistyrose; --indicator-color: deeppink; color: white;" label="Progress" value="75" > Almost there! </quiet-progress> <br> <quiet-progress style="--track-color: mistyrose; --indicator-color: deeppink;" appearance="ring" label="Progress" value="75" > 75% </quiet-progress>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-progress> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/progress/progress.js';
To manually import <quiet-progress> from npm, use the following code.
import '@quietui/quiet/dist/components/progress/progress.js';
Slots Jump to heading
Progress supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | Text to render inside the progress bar. |
Properties Jump to heading
Progress has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
A custom label for assistive devices. |
|
string
|
|
appearance
|
The type of progress bar to render. |
|
'bar'
|
'bar'
|
min
|
The progress bar's minimum value. |
|
number
|
0
|
max
|
The progress bar's maximum value. |
|
number
|
100
|
value
|
The progress bar's current value. |
|
number
|
0
|
percentage
|
The progress bar's current value as a percentage. This is a readonly property. |
|
||
indeterminate
|
When the completion status can't be determined, the progress bar is considered indeterminate and the value is ignored. Useful for tasks whose progress can't be reported. |
|
boolean
|
false
|
CSS custom properties Jump to heading
Progress supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--track-color |
The color of the progress bar's track. |
var(--quiet-neutral-fill-softer)
|
--track-size |
The height or thickness of the track, depending on the type of progress bar. |
1.5em | 1em
|
--indicator-color |
The color of the progress bar's value indicator. |
var(--quiet-primary-fill-mid)
|
--diameter |
For progress rings, the diameter of the ring. |
10em
|
CSS parts Jump to heading
Progress exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
track |
The progress bar's track, a <div> for progress bars and a
<circle> for progress rings.
|
::part(track)
|
indicator |
The progress bar's current value indicator, a <div> for progress bars and an SVG
<circle> for progress rings.
|
::part(indicator)
|
content |
The container that holds any content that's been slotted in. |
::part(content)
|