Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 56827efec820e40cc2e8ea95fd945a732f6549e9 0 parents
@tj tj authored
3  .gitignore
@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css
1  .npmignore
@@ -0,0 +1 @@
+test
0  History.md
No changes.
8 Makefile
@@ -0,0 +1,8 @@
+
+test/out.js: index.js
+ component build package.json test/out
+
+clean:
+ rm -f test/out.{js,css}
+
+.PHONY: clean
45 Readme.md
@@ -0,0 +1,45 @@
+
+# Progress
+
+ Circular progress indicator using canvas.
+
+ ![js progress indicator component](http://f.cl.ly/items/1i0B0D1i1D1Y1e1M1S08/Screen%20Shot%202012-08-10%20at%2011.48.22%20AM.png)
+
+## Installation
+
+```
+$ npm install progress-component
+```
+
+## Example
+
+```js
+var Progress = require('progress');
+
+var progress = new Progress;
+document.body.appendChild(progress.render());
+
+var n = 0;
+var id = setInterval(function(){
+ if (n == 100) clearInterval(id);
+ progress.update(n++);
+}, 50);
+```
+
+## API
+
+### Progress#update(n)
+
+ Update the indicator to `n` and re-draw.
+
+### Progress#font(str)
+
+ Change the font to `str`.
+
+### Progress#size(n)
+
+ Change the indicator diameter to `n`, defaults to 50.
+
+## License
+
+ MIT
7 component.json
@@ -0,0 +1,7 @@
+{
+ "name": "progress",
+ "description": "Progress indicator component",
+ "version": "0.0.1",
+ "keywords": ["progress", "loading", "ui"],
+ "scripts": ["index.js"]
+}
146 index.js
@@ -0,0 +1,146 @@
+
+/**
+ * Expose `Progress`.
+ */
+
+module.exports = Progress;
+
+/**
+ * Initialize a new `Progress` indicator.
+ */
+
+function Progress() {
+ this.percent = 0;
+ this.size(50);
+ this.fontSize(11);
+ this.font('helvetica, arial, sans-serif');
+}
+
+/**
+ * Set progress size to `n`.
+ *
+ * @param {Number} n
+ * @return {Progress}
+ * @api public
+ */
+
+Progress.prototype.size = function(n){
+ this._size = n;
+ return this;
+};
+
+/**
+ * Set text to `str`.
+ *
+ * @param {String} str
+ * @return {Progress}
+ * @api public
+ */
+
+Progress.prototype.text = function(str){
+ this._text = str;
+ return this;
+};
+
+/**
+ * Set font size to `n`.
+ *
+ * @param {Number} n
+ * @return {Progress}
+ * @api public
+ */
+
+Progress.prototype.fontSize = function(n){
+ this._fontSize = n;
+ return this;
+};
+
+/**
+ * Set font `family`.
+ *
+ * @param {String} family
+ * @return {Progress}
+ * @api public
+ */
+
+Progress.prototype.font = function(family){
+ this._font = family;
+ 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)
+ , size = this._size
+ , 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);
+
+ // outer circle
+ ctx.strokeStyle = '#9f9f9f';
+ ctx.beginPath();
+ ctx.arc(x, y, rad, 0, angle, false);
+ ctx.stroke();
+
+ // inner circle
+ ctx.strokeStyle = '#eee';
+ ctx.beginPath();
+ ctx.arc(x, y, rad - 1, 0, angle, true);
+ ctx.stroke();
+
+ // text
+ var text = this._text || (percent | 0) + '%'
+ , w = ctx.measureText(text).width;
+
+ ctx.fillText(
+ text
+ , x - w / 2 + 1
+ , y + fontSize / 2 - 1);
+
+ return this;
+};
+
+/**
+ * Render and return a `Canvas`.
+ *
+ * @return {Canvas}
+ * @api public
+ */
+
+Progress.prototype.render = function(){
+ this.el = document.createElement('canvas');
+ this.el.width = this._size;
+ this.el.height = this._size;
+ this.ctx = this.el.getContext('2d');
+ this.draw(this.ctx);
+ return this.el;
+};
+
11 package.json
@@ -0,0 +1,11 @@
+{
+ "name": "progress-component",
+ "description": "Progress indicator component",
+ "version": "0.0.1",
+ "keywords": ["ui", "progress", "component"],
+ "component": {
+ "scripts": {
+ "progress": "index.js"
+ }
+ }
+}
63 test/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Progress</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" href="out.css" />
+ <style>
+ body {
+ padding: 100px;
+ }
+ canvas {
+ padding: 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <script src="out.js"></script>
+ <script>
+
+ (function(){
+ var Progress = require('progress');
+
+ var progress = new Progress;
+ document.body.appendChild(progress.render());
+
+ var n = 0;
+ var id = setInterval(function(){
+ if (n == 100) clearInterval(id);
+ progress.update(n++);
+ }, 50);
+ })();
+
+ (function(){
+ var Progress = require('progress');
+
+ var progress = new Progress;
+ progress.size(100);
+ document.body.appendChild(progress.render());
+
+ var n = 0;
+ var id = setInterval(function(){
+ if (n == 100) clearInterval(id);
+ progress.update(n++);
+ }, 150);
+ })();
+
+ (function(){
+ var Progress = require('progress');
+
+ var progress = new Progress;
+ progress.size(40);
+ document.body.appendChild(progress.render());
+
+ var n = 0;
+ var id = setInterval(function(){
+ if (n == 100) clearInterval(id);
+ progress.update(n++);
+ }, 80);
+ })();
+
+ </script>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.