Circle Progress
Basic
Dasharray
Linecap
Filled
lineRound
valueOnCircle
circleGap
circleSize
dashOffset
filledCircle
multipleCircle
dotProgress
Options
| Option | Type | Default | Description |
|---|---|---|---|
| value | Number | Indeterminate | Current value |
| min | Number | 0 | Minimum value |
| max | Number | 1 | Maximum value |
| startAngle | Number | 0 |
Starting angle in degrees. Angle of 0 points straight
up. Direction depends on anticlockwise.
|
| anticlockwise | Boolean | false | Whether to rotate anti-clockwise (true) or clockwise (false) |
| unconstrained | Boolean | false |
Whether the value should be constrained between
min and max. If false,
values over max will be truncated to
max and values under
min will be set to min.
|
| indeterminateText | String | '?' | Text to display as the value when it is indeterminate |
| textFormat | String or Function | 'horizontal' |
Text layout for value, min, max. You can pass either one of the possible keywords: horizontal - value/max
vertical - value is shown over max percent - value% value - only value is shown valueOnCircle - the value is painted on
top of the filled region on the circle none - no text is shown.
Alternatively you can provide your own function, which will be called each time progress is updated with value and max as arguments, and is expected to return a string of HTML to insert in the center of the progress circle. Attention! The string returned from your function will be inserted as HTML. Do not pass any dynamic content such as variables coming from elsewhere to avoid XSS vulnerability. |
| animation | String or Function | 'easeInOutCubic' |
Animation easing function. Can be a string keyword
(see the table below for available easings) or
'none'.Alternatively, you can pass your own function with the signature function(time, startAngle, angleDiff,
duration).The function will be called on each animation frame with the current time (milliseconds since animation start), starting angle, difference in angle (i.e. endAngle - startAngle) and animation duration as arguments, and must return the current angle. |
| animationDuration | Number | 600 | Animation duration in milliseconds |
| Part | Description |
|---|---|
::part(base) |
The svg image. You can use this selector to scale the
widget. E. g.:
circle-progress::part(base) {width: 200px; height:
auto;}
|
::part(circle) |
The entire circle (SVG circle element) |
::part(value) |
The arc representing currently filled progress (SVG path element) |
::part(text) |
Text controlled by textFormat option (SVG
text element)
|
::part(text-value) |
Current value text (SVG tspan element). Appears only
for textFormat values of horizontal,
vertical, valueOnCircle
|
::part(text-max) |
Maximum value text (SVG tspan element). Appears only
for textFormat values of horizontal,
vertical, valueOnCircle
|
Documentations |
Please visit: https://tigrr.github.io/circle-progress/ |