progress.js

/**
 * Module dependencies.
 */

var autoscale = require('autoscale-canvas');

/**
 * Expose `Progress`.
 */

module.exports = Progress;

/**
 * Initialize a new `Progress` indicator.
 */

function Progress() {
  this.percent = 0;
  this.el = document.createElement('canvas');
  this.ctx = this.el.getContext('2d');
  this.color = '#00bbff';
  this.shadowColor = 'rgba(0, 187, 255, 0.3)';
  this.fontSize = 12;
  this.font = 'helvetica, arial, sans-serif';
  this.size(52);
}

/**
 * Set progress size to `n`.
 *
 * @param {Number} n
 * @return {Progress}
 * @api public
 */

Progress.prototype.size = function(n){
  this.el.width = n;
  this.el.height = n;
  autoscale(this.el);
  return this;
};

/**
 * Update percentage to `n`.
 *
 * @param {Number} n
 * @return {Progress}
 * @api public
 */

Progress.prototype.update = function(n){
  this.percent = n;
  this.draw(this.ctx);
  return this;
};

/**
 * Draw on `ctx`.
 *
 * @param {CanvasRenderingContext2d} ctx
 * @return {Progress}
 * @api private
 */

Progress.prototype.draw = function(ctx){
  var percent = Math.min(this.percent, 100)
    , ratio = window.devicePixelRatio || 1
    , size = this.el.width / ratio
    , half = size / 2
    , x = half
    , y = half
    , rad = half - 1
    , fontSize = this.fontSize;

  ctx.font = fontSize + 'px ' + this.font;

  var angle = Math.PI * 2 * (percent / 100);
  ctx.clearRect(0, 0, size, size);

  // shadow
  ctx.shadowColor = this.shadowColor;
  ctx.shadowBlur = 10;

  // outer circle
  ctx.strokeStyle = this.color;
  ctx.beginPath();
  ctx.arc(x, y, rad, 0, angle, false);
  ctx.stroke();

  return this;
};