progress-svg

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

Installation

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')

API

Progress()

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
document.body.appendChild(progress.el)

Progress#size(n)

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

progress.size(40)

Progress#update(n)

update the display to show n percent completion

progress.update(50)

Progress#text(str)

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

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