@maggioli-design-system/mds-progress

mds-progress

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 JavaScript framework you are using.

Properties

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'

CSS Custom Properties

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

Dependencies

Used by

• mds-accordion-timer-item
• mds-benchmark-bar
• mds-input-upload
• mds-stepper-bar-item

Graph

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