Svelte Progress Circle

A circular progress bar as a Svelte component. Demo page

Basic usage

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

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:

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

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.