Svelte Progress Circle

A circular progress bar as a Svelte component.
Demo page

Basic usage

``html

`

Props

$3

The maximum value.

$3

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:

`html

{value}

``

Styling

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

$3

The background color, defaults to _transparent_.

$3

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

$3

The color of the actually bar, defaults to _lightgreen_

$3

The color of the track, defaults to _grey_

$3

The width of the bar, defaults to _10px_.

$3

The width of the track, defaults to _9px_.