2.22.0Visually indicates the quantity or progression of an activity.
Progress Bar is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.
npm install @bolt/components-progress-bar
{% include "@bolt-components-progress-bar/progress-bar.twig" with {
value: 65,
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| attributes | A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-progress-bar> tag. |
object
| — |
|
| value * | The current value. |
number
| — |
|
| valueFormat | The data format that the current value should display. |
string
|
percent
|
|
| max | - Minimum is 1 The maximum value. |
number
|
100
|
|
| animated | Enables the animated background to better indicate active progress. Note: this will also automatically add a striped design to the bar when enabled. |
boolean
|
false
|
|
| min | The minimum value. Note: this prop is reserved for advanced usage. |
number
|
0
|
|