This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
direction |
direction |
Specifies the direction of the progress bar, if horizonatl or vertical | "horizontal" | "vertical" | undefined |
'horizontal' |
progress |
progress |
A value between 0 and 1 that rapresents the status progress | number |
0 |
steps |
steps |
Sets the steps that can be pronounced by accessibility technologies | string |
'Inizio,Un quarto,Metà,Tre quarti,Fine' |
variant |
variant |
Sets the theme variant colors | "dark" | "error" | "info" | "light" | "primary" | "success" | "warning" |
'primary' |
Name | Description |
---|---|
--mds-progress-background |
Sets the background-color of the component |
--mds-progress-color |
Sets the background-color of the progress |
--mds-progress-duration |
Sets the duration of the progress bar animation |
--mds-progress-radius |
Sets the border-radius of the component |
--mds-progress-thickness |
Sets the thickness of the progress bar |
graph TD;
mds-accordion-timer-item --> mds-progress
mds-benchmark-bar --> mds-progress
mds-input-upload --> mds-progress
mds-stepper-bar-item --> mds-progress
style mds-progress fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department