Circular progress indicator using SVG


Circular progress indicator using SVG because, unlike canvas, SVG can be easilly styled with CSS.

With your favourite package manager:

  • packin: packin add jkroso/progress-svg
  • component: component install jkroso/progress-svg
  • npm: npm install progress-svg

then in your app:

var Progress = require('progress-svg')

The Progress class. The progress circle will automatically center itself within whatever element you put it. In the example below it will be displayed in the middle of the document.

var progress = new Progress

Set the size of the circle in pixels. The default is 100


update the display to show n percent completion


set the text to be placed in the center of the progress circle

progress.text('%d percent') // '50 percent'