Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Circular progress indicator using SVG
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
License
Makefile
Readme.md
component.json
example.html
index.js
package.json
template.jade
template.js

Readme.md

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'
Something went wrong with that request. Please try again.