Skip to content
This repository has been archived by the owner. It is now read-only.

stephane-vanraes/svelte-progresscircle

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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.

About

A circular progress bar component for Svelte

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published