Ui.CircularProgress

A circular progress bar displaying progress as a circle and the percentage and the actual values as text.

Interactive Demo

You can play around with a Ui.CircularProgress below using the controls.

20
20/100
Size (16px)
Thickness (0.3125em)
Width (12)
Max (100)
Current (20)
<Ui.CircularProgress
size={Ui.Size.Px(16)}
thickness={0.3125}
current={20}
width={12}
max={100}/>
Size

The size of the component can be set with the size property.

50
50/100
50
50/100
50
50/100
<>
<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}/>
</>
Current

The current value can be set with the current property.

0
0/100
25
25/100
50
50/100
<>
<Ui.CircularProgress current={0}/>
<Ui.CircularProgress current={25}/>
<Ui.CircularProgress current={50}/>
</>
Max

The maximum value can be set with the max property.

42
50/120
25
50/200
13
50/400
<>
<Ui.CircularProgress current={50} max={120}/>
<Ui.CircularProgress current={50} max={200}/>
<Ui.CircularProgress current={50} max={400}/>
</>
Max

The maximum value can be set with the max property.

42
50/120
25
50/200
13
50/400
<>
<Ui.CircularProgress current={50} max={120}/>
<Ui.CircularProgress current={50} max={200}/>
<Ui.CircularProgress current={50} max={400}/>
</>
Thickness

The thickness of the circle can be set with the thickness property (in ems).

62
62/100
62
62/100
62
62/100
<>
<Ui.CircularProgress thickness={0.25} current={62}/>
<Ui.CircularProgress thickness={0.5} current={62}/>
<Ui.CircularProgress thickness={0.75} current={62}/>
</>
Format

The format property can be used to format the numeric values.

61
624 B/1.02 kB
<><Ui.CircularProgress format={FileSize.format} current={624} max={1024}/></>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.