radial-progress-svelte is a light-weight responsive SVG radial progress component for Svelte.

✨Demo

Click here to see a live demo

Install

npm i radial-progress-svelte

Usage

<script>
import { RadialProgress } from 'radial-progress-svelte';

const maxTotalSize = 150;
const thickness = 30;
const size = 200;
const data = [
	{ value: 40, color: '#2B2EFF' },
	{ value: 20, color: '#1761FF' },
	{ value: 60, color: '#1761FF' }
];

$: totalProgress = data.reduce((acc, curr) => acc + curr.value, 0);
</script>

<RadialProgress {data} {maxTotalSize} {thickness} {size}>
   <div>{totalProgress} / {maxTotalSize}</div>
</RadialProgress>

ℹ️ In case the size parameter is not provided, the radial progress component will automatically adjust its size to fit in the parent element.

Component props

Component slots

Contribute

1. Fork the repo
2. Clone the forked repo

Install and run the project

npm install
npm run dev