Preview

Usage

<!-- In progress -->
<cs-progress-bar value="60"></cs-progress-bar>

<!-- Completed successfully -->
<cs-progress-bar value="100" status="success"></cs-progress-bar>

<!-- Error state -->
<cs-progress-bar value="30" status="error"></cs-progress-bar>

Properties

aria-describedbystring

Adds aria-describedby to the progress bar.

aria-labelstring default: null

Adds an aria-label to the progress bar.

aria-labelledbystring

Adds aria-labelledby to the progress bar.

result-button-textstring

Specifies the text for the button that's displayed when the status is set to error or success. If resultButtonText is empty, the result button isn't displayed.

Note: If you use the flash variant, the result button isn't displayed. Add a button using the action property of the flashbar item instead.

statusProgressBarProps.Status default: 'in-progress'

Specifies the status of the progress bar. You can set it to one of the following:

• "in-progress" - Displays a progress bar.
• "success" or "error" - Displays a result state and replaces the progress element with a status indicator, resultText, and a result button.

valuenumber default: 0

Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.

variantProgressBarProps.Variant default: 'standalone'

Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:

• "flash" - Use this variant when using the progress bar within a flash component. Note that the result button isn't displayed when using this variant. Use the buttonText property and the onButtonClick event listener of the flashbar item instead of the result button provided by the progress bar.
• "key-value" - Use this variant when using the progress bar within the key-value pairs pattern.
• "standalone" Use in all other cases. This is the default value.

Slots

additionalInfo

Information that's displayed below the progress bar or status text.

description

More detailed information about the operation that appears below the label.

label

Short description of the operation that appears at the top of the component.

Make sure that you always provide a label for accessibility.

resultText

Content that's displayed when status is set to error or success.

Events

resultButtonClickCustomEvent<void>

Called when the user clicks the result state button.

Note: If you are using the flash variant, the result button isn't displayed. Use the buttonText property and the onButtonClick event listener of the flashbar item instead.