js-circle v1.1.1

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

function

setValue(value)

• value - number Set a new value for circle bar