started loading indicator

lib/http/public/javascripts/loading.js

@@ -0,0 +1,111 @@
+
+/*!
+ * kue - LoadingIndicator
+ * Copyright (c) 2011 LearnBoost <dev@learnboost.com>
+ * MIT Licensed
+ */
+
+/**
+ * Initialize a new `LoadingIndicator`.
+ */
+
+function LoadingIndicator() {
+  this.size(0);
+  this.fontSize(9);
+  this.font('helvetica, arial, sans-serif');
+}
+
+/**
+ * Set size to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ * @api public
+ */
+
+LoadingIndicator.prototype.size = function(n){
+  this._size = n;
+  return this;
+};
+
+/**
+ * Set font size to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ * @api public
+ */
+
+LoadingIndicator.prototype.fontSize = function(n){
+  this._fontSize = n;
+  return this;
+};
+
+/**
+ * Set font `family`.
+ *
+ * @param {String} family
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.prototype.font = function(family){
+  this._font = family;
+  return this;
+};
+
+/**
+ * Update pos to `n`.
+ *
+ * @param {Number} n
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.prototype.update = function(n){
+  this.percent = n;
+  return this;
+};
+
+/**
+ * Draw on `ctx`.
+ *
+ * @param {CanvasRenderingContext2d} ctx
+ * @return {LoadingIndicator} for chaining
+ */
+
+LoadingIndicator.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 = 'Loading'
+    , w = ctx.measureText(text).width;
+
+  ctx.fillText(
+      text
+    , x - w / 2 + 1
+    , y + fontSize / 2 - 1);
+
+  return this;
+};

lib/http/public/javascripts/main.js

@@ -44,6 +44,16 @@ var sort = 'asc';
  */
 
 function init(state) {
+  var canvas = o('#loading').get(0)
+    , ctx = canvas.getContext('2d')
+    , loading = new LoadingIndicator;
+
+  var n = 0;
+  loading.size(canvas.width);
+  setInterval(function(){
+    loading.update(++n % 100).draw(ctx); 
+  }, 10);
+
   pollStats(1000);
   show(state)();
   o('li.inactive a').click(show('inactive'));

lib/http/public/javascripts/progress.js

@@ -29,6 +29,19 @@ Progress.prototype.size = function(n){
   return this;
 };
 
+/**
+ * Set text to `str`.
+ *
+ * @param {String} str
+ * @return {Progress} for chaining
+ * @api public
+ */
+
+Progress.prototype.text = function(str){
+  this._text = str;
+  return this;
+};
+
 /**
  * Set font size to `n`.
  *
@@ -100,7 +113,7 @@ Progress.prototype.draw = function(ctx){
   ctx.stroke();
 
   // text
-  var text = (percent | 0) + '%'
+  var text = this._text || (percent | 0) + '%'
     , w = ctx.measureText(text).width;
 
   ctx.fillText(

lib/http/public/stylesheets/main.styl

@@ -45,3 +45,6 @@ table
   reset-table()
   tr td
     padding: 2px 5px
+
+#loading
+  margin-left: 25px

lib/http/views/job/list.jade

@@ -6,5 +6,5 @@ script
   });
 
 
+canvas#loading(width=50, height=50)
 #jobs
-#loading

lib/http/views/layout.jade

@@ -7,6 +7,7 @@ html
     script(src='/javascripts/jquery.ext.js')
     script(src='/javascripts/caustic.js')
     script(src='/javascripts/progress.js')
+    script(src='/javascripts/loading.js')
     script(src='/javascripts/job.js')
     script(src='/javascripts/main.js')
   body