Progress

import { Progress } from '@enmovil/ui-design-system';

Shows progress as a bar or a circle, with a percentage, a status such as active or exception, and an optional custom colour.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the progress element.
type	string	No	—	'circle', 'line', 'dashboard'	Shape of the progress indicator: line (default), circle or dashboard.
percent	number	No	—	—	Completion percentage, from 0 to 100.
status	string	No	—	'success', 'normal', 'exception', 'active'	State of the progress: normal, active (animated), success or exception. Changes the colour and the icon shown with the percentage.
strokeColor	string | string[] | ProgressGradient	No	—	—	Colour of the filled part. Accepts a colour string or a gradient object, such as { from, to } or percentage stops.
width	number	No	—	—	Width of the circle in pixels. Applies to the circle and dashboard types.
size	number | [string | number, number] | ProgressSize | { width?: number; height?: number; } | undefined	No	—	—	Size of the indicator, as default, small, a number, or [width, height] for a line.
percentPosition	PercentPositionType	No	—	—	Where the percentage text sits, as { align, type }; for example { align: 'end', type: 'inner' } shows it inside the bar at the end. Applies to the line type.

Other attributes

Progress passes 16 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

This component has no events.

Children

Progress does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Progress in Storybook to try every story with the full set of controls.