eds-progress-bar
Explore the Interactive Component
Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.
See It in Use with Code
Check out this practical implementation of component.
Plain HTML
In React
In Vue
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
labelPaddingX | label-padding-x | Horizontal padding for the label container (CSS value). Examples: “3rem”, “48px”, “2rem” Default: “3rem” | string | '3rem' |
showLabel | show-label | boolean | false | |
value | value | The progress value (0-100). | number | 0 |
variant | variant | Visual variant for the progress bar. - “default”: Standard progress bar with border and centered text - “brand”: EBRAINS branded progress bar with gradient, glow, and top text | "brand" | "default" | 'default' |
Methods
updateValue(newValue: number) => Promise<void>
Method to update the progress value externally.
Parameters
| Name | Type | Description |
|---|---|---|
newValue | number | The new progress value (0-100). |
Returns
Type: Promise<void>
Built with StencilJS