jquery Round progress bar

Recently, the project needs to complete the equipment performance of the test display function, the need to use the round progress bar such effects, online find a circle, there are quite a number of plug-ins, find: Circliful plug-in, see his use of the description of the convenience of comparison, so downloaded it and will want to add the effect to go in;

The above effect, need to show the center of the center of the digital dynamic, and the color value at less than 50 when the green, greater than 50 when the red;

First step: Page layout

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
	

		


	

	

		


	

	

		


	

	

		


	

	

		Step Two: Modify Jquery.circliful.js
	

	

		


	

(function ( $ )  {    $.fn.circliful = function (options)  {         var settings = $.extend ({             // These are the defaults.             foregroundColor:  "#556b2f",             backgroundColor:  "#eee",             fillColor: false,             width: 15,             dimension: 200,             size: 15, percent: 50,endPercent: 100,showValue:  "Showvalue",  //new   Dynamic numeric change value display label id            animationstep: 1.0         }, options );          return this.each (function ()  {                 var dimension =  ';                 var text =  ';var info =  ';                 var width =  ";                 var size  = 0;var percent = 0;var endpercent = 100;var fgcolor =   ';var bgcolor =  ';var icon =  ';                 var animationstep = 0.0;var showvalue =  ';                 $ (This). AddClass (' Circliful '); showvalue = settings.showvalue; //assignment                  if ($ (this). Data (' dimension ')  != undefined)  {                     dimension = $ (this). Data (' dimension ');                 } else {                     dimension =  settings.dimension;                 }                     if ($ (this). Data (' Width ')  != undefined)  {                     width = $ (this). Data (' width ');                 } else {                      width = settings.width;                 }                     if ($ (this). Data (' fontsize ')  != undefined)  {                      size = $ (this). Data (' FOntsize ');                 }  else {                     size = settings.size;                 }if ($ (this). Data (' percent ')  != undefined)  {                      percent = $ (this). Data (' percent ')  / 100;endpercent = $ (this). Data (' Percent ');                 }  else {                     percent = settings.percent / 100;endPercent =  Settings.endpercent;  &nBsp;             }if ($ (this). Data (' Fgcolor ')  != undefined)  {                     fgcolor = $ (this). Data (' Fgcolor ');                 } else {                     fgcolor  = settings.foregroundColor;                 }if ($ (this). Data (' bgcolor ')  != undefined)  {                     bgcolor =  $ (this). Data (' bgcolor ');                 } else {                     bgcolor = settings.backgroundColor;                 }                 if ($ (this). Data (' Animation-step ')  != undefined )  {                     animationstep = parsefloat ($ (this). Data (' Animation-step '));                 } else {                      animationstep = settings.animationstep;                 }                 if ($ (this). Data (' text ')  != undefined)  {                     text = $ (this). Data (' text '), if ($ (this). Data (' Icon ')  != undefined)  {icon =  ' <i class= ' fa  '  + $ (this). Data (' Icon ')  +  ' ></i> ';}  if ("This"). Data (' type ')  != undefined)  {type = $ (this). Data (' type '); if (type  ==  ' half ')  {$ (This). Append (' <span class= ' circle-text-half ' > '  +  icon   + text +  ' </span> '), $ (this). Find ('. Circle-text-half '). css ({' Line-height '):   (dimension / 1.45)  +  ' px ',  ' font-size '  : size +  ' px '  } );}  else {$ (This). Append (' <span class= ' circle-text ' > '  + icon + text +  ' </span> ');//Set Text style $ (this). Find ('. Circle-text '). css ({' Line-height ':  dimension +  ' px ',  ' font-size '  : size +  ' px ');}}  else {$ (This). Append (' <span class= ' circle-text ' > '  + icon + text  +  ' </span> '), $ (this). Find ('. Circle-text '). css ({' line-height ': dimension +  ' px ') ,  ' font-size '  : size +  ' px '  }                 } else  if ("This"). Data (' icon ')  != undefined)  {}if ($ (this). Data (' info ')  != undefined)  {                     info = $ (this). Data (' info '), if ($ (this). Data (' type ')  != undefined)  { type = $ (this). Data (' type '), if (type ==  ' half ')  { $ (This). Append (' &Lt;span class= "Circle-info-half" > '  + info +  ' </span> '); $ (this). Find ('. Circle-info-half '). css ({' Line-height ':  (dimension * 0.9)  +  ' px ',  });}  else {$ (This). Append (' <span class= ' circle-info ' > '  + info +  ' </ Span> '); $ (this). Find ('. Circle-info '). css ({' Line-height ':  (dimension * 1.25)  +  ' px ' ,  });}}  else {$ (This). Append (' <span class= ' circle-info ' > '  + info +  ' </ Span> '); $ (this). Find ('. Circle-info '). css ({' Line-height ':  (dimension * 1.25)  +  ' px ' ,  });}                 }                     $ ( This). Width (dimension +  ' px ');               var canvas = $ (' <canvas></canvas> '). attr ({ width: dimension,  height: dimension }). AppendTo ($ (this)). Get (0);               var context = canvas.getcontext (' 2d ');               var x = canvas.width / 2;               var y =  Canvas.height / 2;  var degrees = percent * .0;  var  radians = degrees *  (math.pi / 180);               var radius = canvas.width / 2.5;               var startangle =  2.3 * math.pi;              var endangle =  0;              var  counterclockwise = false;               var curPerc = animationstep === 0.0 ? endPercent :  0.0;              var curstep  = math.max (animationstep, 0.0);  var circ = math.pi * 2;   var quart = Math.PI / 2;  var type =  ';   Var fill = false;    if ($ (this). Data (' type ')  != undefined)  {                      type = $ (This). Data (' type '); if (type ==  ' half ')  {var startAngle = 2.0 * Math.PI; var endangle = 3.13;var circ = math.pi * 1.0;var quart =  math.pi / 0.996;}                 }if ($ (this). Data (' Fill ')  != undefined)  {fill = $ (this). Data (' Fill ');}  else {fill = settings.fillcolor;}   //animate foreground circle  function animate (current)  {/** *  [Modify]  Set Center Dynamic Data Change value  * showValue  for display dynamic value of HTML tag id *  here  parseint (current*   takes an integer, his maximum value is  endpercent value  **/$ ("#" +showvalue). HTML (parseint (current*100));/** * [ Modify]  to determine whether the value is more than half the circle and modify the circle color  * **/if (current < 0.5) {fgcolor =  ' #14b997 ';} else{fgcolor =  ' #f75656 ';} Context.clearrect (0, 0, canvAs.width, canvas.height);  context.beginpath (); Context.arc (X, y, radius, endangle,  startangle, false);context.linewidth = width - 1;// line  Colorcontext.strokestyle = bgcolor;context.stroke (); if (fill)  {context.fillStyle =  Fill;context.fill ();} Context.beginpath (); Context.arc (x, y, radius, -(quart),  ((CIRC)  * current)   - quart, false);context.linewidth = width;// line colorcontext.strokestyle  = fgcolor;context.stroke ();if  (curperc < endpercent)  {        curperc += curstep; requestanimationframe (function  ()  {/** *  [modify]  to reduce the circular progress bar speed  **/settimeout (function () {Animate (Math.min (curperc, endpercent)  /  100);}, 40);  });  } animate (curperc / 100);         });     };} ( jQuery ));
	

		

	
	

		

	
	

		

	
	

		

	
	

		Step Three: Call
	
	

		

	
$ (document). Ready (function () {var cupcount = 10,nccount = 80;var Mystat2color = cupcount > 50? ' #f75656 ': ' #14b997 '; var mystat3color = nccount > 50? ' #f75656 ': ' #14b997 '; $ (' #myStat2 '). Circliful ({dimension:170,endpercent:cupcount,showvalue: "Cputext", Foregroundcolor:mystat2color,//556b2fbackgroundcolor: "#eee",}); $ (' #myStat3 '). Circliful ({dimension:170, Endpercent:nccount,showvalue: "Nctext", Foregroundcolor:mystat3color,backgroundcolor: "#eee",});});

	

		

	
	

		

	
	

		

	
	

		

	
	

		Note: Plugin download https://github.com/pguso/jquery-plugin-circliful on-demand modification, if inappropriate or otherwise, contact: 594710017. 
	
	

		

	
	

		

	
	

		Plug-in Parameter description
	
	

		

	
	

		

	
	

		

	
	

		

	
	

		

	
	

		jquery Round progress bar