radial-progress-svelte

🤗 Svelte Radial Progress

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

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
size	Number	undefined	Specify a fixed size for the radial progress component. In case it's not provided, the component will automatically adjust its size to fit in the parent element, which is a better scenario in case you want responsiveness
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