Skip to content

MazCircularProgressBar

MazCircularProgressBar is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

75 %%

Size

The size of the component can be changed by passing the size prop. The value could be a string in px, em or rem.

75 %%
75 %%
75 %%
75 %%

Duration

The duration of the animation can be changed by passing the duration prop. The value could be a number in milliseconds.

75

Color

The color of the component can be changed by passing the color prop. Should be a valid color in basic colors.

75
75
75
75
75
75

Auto-color

The color of the component is automatically according to the percentage. The color will be green if the percentage is egal to 100%, orange if below 100%, and red if below 50%.

0
25
50
100

Slot

Replace the percentage value by a custom slot.

Obviously, the "counter animation" will not work in this case.

2/4

Props & Slots

Props

Prop nameDescriptionTypeValuesDefault
percentageThe percentage value of the progress barnumber-0
sizeThe size of the progress bar
@default '10em' (equal 80px for a font-size of 16px)
string-'10em'
durationDuration of the animation in milliseconds
@default 1000
number-1000
colorThe color of the progress barColor-undefined
autoColorAuto color based on the count (danger, warning, success)
@default false
boolean-
prefixSuffix to display next to the numberstring-undefined
suffixSuffix to display next to the numberstring-undefined
strokeLinecapThe stroke-linecap style
@default 'round'
@values 'butt', 'round', 'square', 'inherit'
TSIndexedAccessType-'round'
strokeWidthThe stroke width
@default 6
TSIndexedAccessType-6
strokeThe stroke color
Use this prop to override the gradient color
You can use a color name or a color code
TSIndexedAccessType-undefined
successPercentageThe percentage value of the success color
@default 100
number-100
warningPercentageThe percentage value of the warning color
@default 50
number-75
dangerPercentageThe percentage value of the danger color
@default 25
number-50

Slots

NameDescriptionBindings
defaultDefault slot - Replace the percaentage value
prefixPrefix slot - Add a prefix next to the number (e.g: "$")
suffixSuffix slot - Add a suffix next to the number (e.g: "%")