radial-progress-svelte

🤗 Svelte Radial Progress

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

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>

ℹ️ The radial progress component will automatically adjust its size to fit in the parent element.

Component props

name	type	default	description
data	Array<{ value: number, color: string }>	[]	Dataset for the radial progress component
maxTotalSize	Number	The total sum of the value from the `data` prop	Specifies the maximum total size
thickness	Number	30	Specifies the thickness of the radial progress bar
backgroundColor	String	'#D9D9D9'	The color of the remaining space of the radial progress bar

Component slots

name	default	description
Default	Empty	Content to be displayed inside the radial progress component

Contribute

1. Fork the repo
2. Clone the forked repo

Install and run the project

npm install
npm run dev