round-progress-bar
svg circle progress bar.
install
npm install js-circle --saveusage
import Circle from 'js-circle'
Circle(document.querySelector('#baseCircle1'), {
value: 80,
total: 200
})
Circle(document.querySelector('#baseCircle2'), {
value: 130,
total: 200,
strokeLinecap: 'round',
stroke: '#faad42'
})
const baseCircle3 = Circle(document.querySelector('#baseCircle3'), {
value: 160,
total: 200,
strokeWidth: 12,
strokeLinecap: 'round',
stroke: '#f82a5e'
})
// set new value
setInterval(() => {
baseCircle3.setValue(Math.random() \* 200)
}, 2000)configure title
Circle(document.querySelector('#titleCircle'), {
value: 9.4,
total: 16,
strokeLinecap: 'round',
title: (percentage: number, value: number) => {
return `${value}GB`
},
titleStyle: 'font-weight: 200',
subtitle: 'memory usage',
})semi circle
const semiCircle = Circle(document.querySelector('#semiCircle'), {
value: 50,
total: 100,
semiCircle: 0.8,
strokeWidth: 10,
// Gradient with SVG LinearGradient
stroke: 'url(#linearGradient)',
strokeLinecap: 'round',
title: (percentage: number, value: number) => {
return `${percentage}%`
},
titleStyle: 'font-weight: 200; font-size: 18px',
subtitle: 'cpu usage',
subtitleStyle: 'font-weight: 200; fill: #999'
})
setInterval(() => {
semiCircle.setValue(Math.random() \* 100)
}, 2000)To use the ring gradient, you need to create an SVG LinearGradient in the page first
<svg width="160" height="10">
<defs>
<linearGradient id="linearGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#e62864" />
<stop offset="50%" stop-color="#faad42" />
<stop offset="100%" stop-color="#41b983" />
</linearGradient>
</defs>
</svg>option
| Props | Default | Type |
|---|---|---|
| value | 0 | number |
| total | 100 | number |
| radius | '40%' | string Α number |
| title | -- | string Α null Α (percentage: number, value: number) => string |
| titleStyle | '' | css style |
| subtitle | -- | string Α null Α (percentage: number, value: number) => string |
| subtitleStyle | '' | css style |
| strokeWidth | 6 | number |
| stroke | blue | color string |
| backgroundStrokeWidth | 6 | number |
| backgroundStroke | gray | color string |
| semiCircle | 1 | 0 ~ 1 |
| strokeLinecap | butt | butt Α round Α square |
function
setValue(value)
- value - number Set a new value for circle bar