Svelte Progress Circle
A circular progress bar as a Svelte component. Demo page
Basic usage
Props
max
The maximum value.
value
The current value.
Slotted Content
The component shows the current value in the center of the circle by default in a rather plain unstyled way. This is however the fallback behaviour for a slot offering the opportunity to style this to your needs:
{value}
Styling
This component use CSS Variables for the styling with certain defaults, overriding these can easily be done in the parent.
--progress-fill
The background color, defaults to transparent.
--progress-linecap
The linecap defining how the edge of the progressbar will look like, defaults to round.
--progress-color
The color of the actually bar, defaults to lightgreen
--progress-trackcolor
The color of the track, defaults to grey
--progress-width
The width of the bar, defaults to 10px.
--progress-trackwidth
The width of the track, defaults to 9px.