round-progress-bar

svg circle progress bar.

Demo

install

npm install js-circle --save

usage

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