Svelte Radial Progress
Radial progress component for svelte. Doughnut progress bar chart
🤗 Svelte Radial Progress
radial-progress-svelte is a light-weight responsive SVG radial progress component for Svelte.
✨ 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
