Progress
<wa-progress>
Combines multiple progress values into a single segmented track and legend.
Examples
Visible values
Add with-values and place the display value in each progress bar's default slot.
Sizes
Use Web Awesome's s, m, and l size values.
Custom track height
Override --track-height for a custom height.
Notes
- Add one
<wa-progress-bar>per segment. Itsvalue,label, default-slot text, and--indicator-colordefine the segment. - Segment values should normally total no more than 100. The remaining space uses
--track-color. - Use a standalone
<wa-progress-bar>when you need to show one task's progress rather than a segmented summary.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/progress/progress.js';
After installing Web Awesome via npm, import this component:
import '@yoummday/webawesome/dist/components/progress/progress.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/progress/progress.js';
To import this component for React 18 or below, use the following code:
import WaProgress from '@yoummday/webawesome/dist/react/progress/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | One or more wa-progress-bar elements that provide segment values and labels. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
sizesize |
The height preset for the joined progress track.
Type
's' | 'm' | 'l'
Default
'm'
|
|
withValueswith-values |
Shows each progress bar's slotted value above its label.
Type
boolean
Default
false
|
|
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--track-color |
The color of the unfilled track.
Default
var(--wa-color-neutral-fill-normal)
|
--track-height |
The height of the joined track.
Default
var(--wa-space-s)
|
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
legend |
The container for segment labels. |
::part(legend)
|
legend-item |
A segment's legend item. |
::part(legend-item)
|
legend-label |
A segment's label. |
::part(legend-label)
|
legend-value |
A segment's visible value. |
::part(legend-value)
|
progress |
The component's outer wrapper. |
::part(progress)
|
segment |
A segment in the joined progress track. |
::part(segment)
|
track |
The joined progress track. |
::part(track)
|
base |
An alias for the component's outer wrapper. |
::part(base)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.