A circular progress bar as a Svelte component. Demo page

<ProgressCircle max="10" {value} />

The maximum value.

The current value.

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:

<ProgressCircle max="10" {value}>
    <span>{value}</span>
</ProgressCirlce>

This component use CSS Variables for the styling with certain defaults, overriding these can easily be done in the parent.

The background color, defaults to transparent.

The linecap defining how the edge of the progressbar will look like, defaults to round.

The color of the actually bar, defaults to lightgreen

The color of the track, defaults to grey

The width of the bar, defaults to 10px.

The width of the track, defaults to 9px.