sp-progress-bar
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
indeterminate
indeterminate
boolean
false
label
label
string
''
overBackground
over-background
boolean
false
progress
progress
number
0
sideLabel
side-label
boolean
false
static
static
'white' | undefined
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.48.0 (2024-09-17) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.45.0 (2024-07-30) #
Bug Fixes #
- progress-bar: removed duplicate label (
#4494 ) (39b6622 )
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.1 (2024-04-02) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.42.0 (2024-03-19) #
Bug Fixes #
- progress-bar: remove aria-label only if set by label and label is empty; add tests (
d351451 ) - styles, theme: surface exports that omit Spectrum Vars proactively (
#4142 ) (5b524c1 )
Features #
- asset: use core tokens (
99e76f4 )
0.41.2 (2024-03-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.41.1 (2024-02-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.41.0 (2024-02-13) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.5 (2024-02-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.4 (2024-01-29) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.3 (2024-01-11) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.40.0 (2023-11-16) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.39.2 (2023-10-13) #
Bug Fixes #
- update deps graph, update link docs (
#3709 ) (2deb284 )
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.39.0 (2023-09-25) #
Features #
- meter: add "variant" (coalescing various boolean attributes) and remove "over-background" attributes (
#3514 ) (40e5f8a )
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.37.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.35.0 (2023-07-31) #
Bug Fixes #
- meter, progress-bar, progress-circle: use innerText when label is not provided (
#3483 ) (59358c7 )
0.34.0 (2023-07-11) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.32.0 (2023-06-01) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.31.0 (2023-05-17) #
Bug Fixes #
- meter,progress-bar: add i18n to progress delivery (
c7e4020 )
0.30.0 (2023-05-03) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
Features #
- add t-shirt sizing to the Radio pattern (
fc49343 ) - adopt DNA@7 base Spectrum CSS (
e08cafd ) - delivery dev mode messages in various packages (
62370a1 ) - include all Dev Mode files in side effects (
f70817c ) - progress-bar: replace bar-loader with progress-bar (
182935c ) - progress-bar: use core tokens (
540552e ) - shared pkg versions, devmode define warning, registry-conflicts docs (
6e49565 ) - tabs: add sp-tab-panel element (
b17d276 ) - use latest exports specification (
a7ecf4b )
0.9.4 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.9.3 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.9.2 (2023-03-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.9.1 (2023-03-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.9.0 (2023-02-08) #
Features #
- progress-bar: use core tokens (
540552e )
0.8.7 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.6 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.5 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.4 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.3 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.2 (2022-10-28) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.1 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.8.0 (2022-10-10) #
Features #
- add t-shirt sizing to the Radio pattern (
fc49343 )
0.7.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.6.0 (2022-08-04) #
Features #
- delivery dev mode messages in various packages (
62370a1 )
0.5.13 (2022-07-18) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.12 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.11 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.10 (2022-05-27) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.9 (2022-05-12) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.8 (2022-04-21) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.7 (2022-03-30) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.6 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.5 (2022-03-04) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.4 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.3 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.2 (2022-01-07) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.1 (2021-12-13) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.5.0 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.4.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.4.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.3.9 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.8 (2021-09-20) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.7 (2021-09-13) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.6 (2021-08-24) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.5 (2021-08-17) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.4 (2021-08-03) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.3 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.2 (2021-07-01) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.1 (2021-06-16) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.3.0 (2021-05-24) #
Features #
- tabs: add sp-tab-panel element (
b17d276 )
0.2.7 (2021-05-12) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.6 (2021-04-15) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.5 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.4 (2021-03-29) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.3 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.2 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/progress-bar
0.2.0 (2021-03-04) #
Features #
- use latest exports specification (
a7ecf4b )
0.1.1 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
0.1.0 (2021-02-02) #
Features #
- progress-bar: replace bar-loader with progress-bar (
182935c )
Description #
An <sp-progress-bar>
shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.
Usage #
yarn add @spectrum-web-components/progress-bar
Import the side effectful registration of <sp-progress-bar>
via:
import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
When looking to leverage the ProgressBar
base class as a type and/or for extension purposes, do so via:
import { ProgressBar } from '@spectrum-web-components/progress-bar';
Sizes #
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar size="s" label="Loaded a little" progress="22" ></sp-progress-bar> </div>
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar size="m" label="Loaded a little" progress="22" ></sp-progress-bar> </div>
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar size="l" label="Loaded a little" progress="22" ></sp-progress-bar> </div>
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar size="xl" label="Loaded a little" progress="22" ></sp-progress-bar> </div>
Variants #
Over background #
When a progress bar needs to be placed on top of a colored background, use the over background progres bar as signified by [over-background]
. This progress bar uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-transparent-black-400);" > <sp-progress-bar label="Loaded a large amount" progress="77" over-background ></sp-progress-bar> </div>
Indeterminate #
A progress bar can be either determinate or indeterminate as signified by [indeterminate]
. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar aria-label="Loaded an unclear amount" indeterminate ></sp-progress-bar> </div>
The above sp-progress-bar
also leverages the aria-label
attribute in place of the label
attribute in ensure that the element is labelled correctly without that label appearing visibly in the UI.
Side Label #
A progress bar can be delivered with its labeling displayed above its visual indicator or to either side. Use the boolean [side-label]
attribute to define where this content should appear.
<div style="width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-around;" > <sp-progress-bar side-label indeterminate label="Label Beside" ></sp-progress-bar> </div>
Accessibility #
An sp-progress-bar
element will register itself as a role="progressbar"
element in the accessibility tree. Any value applied to the label
attribute will be used both to visibly label the element and to set the aria-label
attribute on the host. In cases where a visible label is not desired, be sure to include an aria-label
attribute manually to ensure that the sp-progress-bar
correctly fulfills its responsibilities to visitors of you site of all abilities.