RingProgress
Give user feedback for status of the task with circle diagram
Import
Source
Docs
Package
Usage
Set sections
prop to an array of:
value
– number between 0 and 100 – amount of space filled by segmentcolor
– segment color from theme or any other css color value
Application data usage
Colors
In previous example colors from theme.colors
were used, but any other css colors can be used instead:
Size, thickness & rounded caps
Use size
, thickness
& roundCaps
props to configure RingProgress, size and thickness values:
Sections tooltips
Add tooltip
property to section to display floating Tooltip when user hovers over it:
Hover sections to see tooltips
Rootcolor
Use rootColor
property to change the root color:
Sections props
You can add any additional props to sections:
Hovered section: none
Customize label
You can add any React node as label, e.g. Text component with some additional styles or ThemeIcon:
40%
RingProgress component props
Name | Type | Description |
---|---|---|
label | ReactNode | Label displayed in the center of the ring |
rootColor | MantineColor | Color of the root section, key of theme.colors or CSS color value |
roundCaps | boolean | Sets whether the edges of the progress circle are rounded |
sections * | RingProgressSection[] | Ring sections |
size | number | Width and height of the progress ring |
thickness | number | Ring thickness |
RingProgress component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-RingProgress-root | Root element |
label | .asuikit-RingProgress-label | Label element |