Fork me on GitHub

Radial Progress Bar

The default blue progress bar, semi-transparent background path, and 40px progress text in the center. Subsequent percentage settings can be queued. 

jQuery("#example1")
  .radialProgress("init", { size: 100, fill: 5 })
  .radialProgress("to", { perc: 50, time: 2500 })
  .radialProgress("to", { perc: 25, time: 2500 })
  .radialProgress("to", { perc: 100, time: 2500 });

Simple Pie Chart

Multiple radial progress bars layered on top and offsetted by each other. Values are visible in the center as a list. Data is loaded in initialization. 

jQuery("#pie")
  .radialPieChart("init", { 
    fontSize: 13, fill: 20,
    data: [
      { color: "#2DB1E4", perc: 25 },
      { color: "#9CCA13", perc: 30 },
      { color: "#A4075E", perc: 45 }
    ]
  });

Inline Icons

With a small size and fill settings and transparent text inline icon progress bar or pie chart can be created. 

jQuery("#smallrad")
  .radialProgress("init", {
    size: 20, fill: 2, textColor: "transparent"
  })
  .radialProgress("to", { perc : 66 });

jQuery("#smallpie")
  .radialPieChart("init", {
    size: 20, fill: 5, textColor: "transparent",
    data: [
      { color: "#2DB1E4", perc: 30 },
      { color: "#9CCA13", perc: 40 },
      { color: "#A4075E", perc: 30 }
    ]
  });

Concentric Bars

Multiple radial progress bars in concentric circles around each other. Defined as regular radial progress bar, empty on init, each bar can be set separately or together.

With ranges and periodic updates the clock on the left can be easily created. 

var c = jQuery("#multi")
  .radialMultiProgress("init", {
    fontSize: 14, fill: 25,
    data: [
      { color: "#2DB1E4", range: [0, 12] },
      { color: "#9CCA13", range: [0, 59] },
      { color: "#A4075E", range: [0, 59] }
    ]
  });

(function(clock) {
  var dh, dm, ds;
  setInterval(function() {
    var date = new Date(),
        h = date.getHours() % 12, 
        m = date.getMinutes(), 
        s = date.getSeconds();
    if (dh !== h) { dh = h;
      clock.radialMultiProgress("to", { 
        index: 0, perc: h, time: (h ? 100 : 10) 
      });
    }
    if (dm !== m) { dm = m;
      clock.radialMultiProgress("to", { 
        index: 1, perc: m, time: (m ? 100 : 10) 
      }); 
    }
    if (ds !== s) { ds = s;
      clock.radialMultiProgress("to", { 
        index: 2, perc: s, time: (s ? 100 : 10) 
      }); 
    }
  }, 1000);
})(c);