Import
import { ProgressbarModule } from '@backbase/ui-ang/progressbar'
Usage
Use the bb-progressbar-ui component to display task progress. The component requires a value input to show the current progress state.
<!-- Basic progressbar usage -->
<bb-progressbar-ui [value]="40" [max]="100"></bb-progressbar-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
animated |
boolean |
false |
|
height |
string |
undefined |
|
max |
number |
100 |
|
showValue |
boolean |
false |
|
striped |
boolean |
false |
|
type |
ProgressbarType |
undefined |
|
value |
number |
0 |
animated
The animated input indicates if the stripes of the progress bar should be animated. Only applies when striped is also set to true.
<!-- Animated striped progressbar -->
<bb-progressbar-ui
[value]="75"
[striped]="true"
[animated]="true">
</bb-progressbar-ui>
height
The height input sets the height of the progress bar. Accepts values in px, em, or rem units.
<!-- Progressbar with custom height -->
<bb-progressbar-ui
[value]="40"
[height]="'8px'">
</bb-progressbar-ui>
max
The max input sets the maximum value of the progressbar. The progress percentage is calculated as (value / max) * 100.
<!-- Progressbar with custom maximum value -->
<bb-progressbar-ui
[value]="250"
[max]="500">
</bb-progressbar-ui>
showValue
The showValue input indicates if the current value should be displayed within the progressbar as text.
<!-- Progressbar showing current value -->
<bb-progressbar-ui
[value]="75"
[showValue]="true">
</bb-progressbar-ui>
striped
The striped input indicates if the progress bar should display with a striped pattern.
<!-- Striped progressbar -->
<bb-progressbar-ui
[value]="65"
[striped]="true">
</bb-progressbar-ui>
type
The type input sets the visual style variant of the progress bar using semantic colors.
<!-- Success type progressbar -->
<bb-progressbar-ui
[value]="100"
[type]="'success'">
</bb-progressbar-ui>
Available types
- primary: Default primary color
- success: Green color for successful completion
- info: Blue color for informational progress
- warning: Yellow color for warning states
- danger: Red color for error or critical states
value
The value input sets the current value of the progressbar. Should always be less than or equal to max.
<!-- Progressbar with specific value -->
<bb-progressbar-ui [value]="85"></bb-progressbar-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- Progress indication: The component uses proper progressbar role and ARIA attributes to communicate current progress state
- Screen reader support: Progress values and completion status are properly announced to assistive technologies
- Semantic markup: Uses appropriate HTML structure with ARIA labels for accessibility compliance
- Value communication: Current progress value and maximum value are communicated to screen readers when showValue is enabled
The component automatically calculates and communicates the progress percentage to assistive technologies, ensuring users with visual impairments can understand the current state of the task being tracked.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaLabel |
Sets the accessible label for the progressbar element |
string |