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

• Fork the repo
• Clone the forked repo

Install and run the project

npm install
npm run dev