A circular progress bar displaying progress as a circle and the percentage and the actual values as text.
You can play around with a Ui.CircularProgress below using the controls.
Ui.CircularProgress
<Ui.CircularProgress size={Ui.Size.Px(16)} thickness={0.3125} current={20} width={12} max={100}/>
The size of the component can be set with the size property.
size
<> <Ui.CircularProgress size={Ui.Size.Px(12)} current={50}/> <Ui.CircularProgress size={Ui.Size.Px(16)} current={50}/> <Ui.CircularProgress size={Ui.Size.Px(20)} current={50}/></>
The current value can be set with the current property.
current
<> <Ui.CircularProgress current={0}/> <Ui.CircularProgress current={25}/> <Ui.CircularProgress current={50}/></>
The maximum value can be set with the max property.
max
<> <Ui.CircularProgress current={50} max={120}/> <Ui.CircularProgress current={50} max={200}/> <Ui.CircularProgress current={50} max={400}/></>
The thickness of the circle can be set with the thickness property (in ems).
thickness
<> <Ui.CircularProgress thickness={0.25} current={62}/> <Ui.CircularProgress thickness={0.5} current={62}/> <Ui.CircularProgress thickness={0.75} current={62}/></>
The format property can be used to format the numeric values.
format
<><Ui.CircularProgress format={FileSize.format} current={624} max={1024}/></>
Mint UI is a design system and component library for building websites, web and desktop applications.