first version

README.md

@@ -0,0 +1,36 @@
+# Circular progress
+
+A JavaScript circular progress bar widget, dependency-free and configurable.
+
+## Example
+
+```javascript
+var progressBar = new CircularProgress({
+  width: 200,
+  height: 200,
+  radius: 70,
+  strokeStyle: '#000',
+  lineCap: 'round',
+  lineWidth: '4.0'
+});
+
+document.body.appendChild(progressBar.canvas);
+
+progressBar.progress(0.4);
+```
+
+## Usage
+
+### new CircularProgress( options )
+
+Options must contains :
+
+* `width`
+* `height`
+* `radius`
+
+Other attributes are attached to the canvas 2D context.
+
+### progress( value )
+
+Notify the progress, and draw the canvas, `value` is a float between 0 and 1.

circular-progress.js

@@ -0,0 +1,33 @@
+(function () {
+  var circ = Math.PI * 2,
+  quart = Math.PI / 2;
+
+  this.CircularProgress = function (options) {
+    if (! options.width || ! options.height || ! options.radius) {
+      return ;
+    }
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = options.width;
+    this.canvas.height = options.height;
+
+    this.radius = options.radius;
+
+    delete options.width;
+    delete options.height;
+    delete options.radius;
+
+    this.ctx = this.canvas.getContext('2d');
+    for (var i in options) {
+      console.log(i);
+      this.ctx[i] = options[i];
+    }
+  };
+
+  this.CircularProgress.prototype.progress = function (value) {
+    this.ctx.beginPath();
+    this.ctx.arc(this.canvas.width / 2, this.canvas.height / 2, this.radius, -(quart), ((circ) * value) - quart, false);
+    this.ctx.stroke();
+  };
+
+}).call(this);

component.json

@@ -0,0 +1,6 @@
+{
+  "name": "circular-progress",
+  "description": "A JavaScript circular progress bar widget, dependency-free and configurable.",
+  "version": "0.1.0",
+  "main": "circular-progress.js"
+}