https://servicosonline.cm-penafiel.pt/penafiel-atendimentonet/scripts/radialprogress.js

1window.rp_requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||(function(callback,element){setTimeout(callback,1000/60);});
2function RadialProgress(container,cfg){
3	container.innerHTML="";
4	var nc=document.createElement("div");
5	nc.style.width="10em"; nc.style.height="10em";
6	nc.style.position="relative";
7	container.appendChild(nc);
8	container=nc;
9	if(!cfg) cfg={};
10	this.colorBg=cfg.colorBg==undefined?"#404040":cfg.colorBg;
11	this.colorFg=cfg.colorFg==undefined?"#007FFF":cfg.colorFg;
12	this.colorText=cfg.colorText==undefined?"#FFFFFF":cfg.colorText;
13	this.indeterminate=cfg.indeterminate==undefined?false:cfg.indeterminate;
14	this.round=cfg.round==undefined?false:cfg.round;
15	this.thick=cfg.thick==undefined?2:cfg.thick;
16	this.progress=cfg.progress==undefined?0:cfg.progress;
17	this.noAnimations=cfg.noAnimations==undefined?0:cfg.noAnimations;
18	this.fixedTextSize=cfg.fixedTextSize==undefined?false:cfg.fixedTextSize;
19	this.animationSpeed=cfg.animationSpeed==undefined?1:cfg.animationSpeed>0?cfg.animationSpeed:1;
20	this.noPercentage=cfg.noPercentage==undefined?false:cfg.noPercentage;
21	this.spin=cfg.spin==undefined?false:cfg.spin;
22	if(cfg.noInitAnimation) this.aniP=this.progress; else this.aniP=0;
23	var c=document.createElement("canvas");
24	c.style.position="absolute";c.style.top="0";c.style.left="0";c.style.width="100%";c.style.height="100%";c.className="rp_canvas";
25	container.appendChild(c);
26	this.canvas=c;
27	var tcc=document.createElement("div");
28	tcc.style.position="absolute";tcc.style.display="table";tcc.style.width="100%";tcc.style.height="100%";
29	var tc=document.createElement("div");
30	tc.style.display="table-cell";tc.style.verticalAlign="middle";
31	var t=document.createElement("div");
32	t.style.color=this.colorText;t.style.textAlign="center";t.style.overflow="visible";t.style.whiteSpace="nowrap";t.className="rp_text";
33	tc.appendChild(t);
34	tcc.appendChild(tc);
35	container.appendChild(tcc);
36	this.text=t;
37	this.prevW=0; this.prevH=0; this.prevP=0; this.indetA=0; this.indetB=0.2; this.rot=0;
38	this.draw=function(f){
39		if(!(f==true))rp_requestAnimationFrame(this.draw);
40		var c=this.canvas;
41		var dp=window.devicePixelRatio||1;
42		c.width=c.clientWidth*dp; c.height=c.clientHeight*dp;
43		if(!(f==true)&&!this.spin&&!this.indeterminate&&(Math.abs(this.prevP-this.progress)<1&&this.prevW==c.width&&this.prevH==c.height)) return;
44		var centerX=c.width/2, centerY=c.height/2, bw=(c.clientWidth/100.0), radius=c.height/2-(this.thick*bw*dp)/2, bw=(c.clientWidth/100.0);
45		this.text.style.fontSize=(this.fixedTextSize?(c.clientWidth*this.fixedTextSize):(c.clientWidth*0.26-this.thick))+"px";
46		if(this.noAnimations) this.aniP=this.progress; else{var aniF=Math.pow(0.93,this.animationSpeed);this.aniP=this.aniP*aniF+this.progress*(1-aniF);}
47		c=c.getContext("2d");
48		c.beginPath();
49		c.strokeStyle=this.colorBg;
50		c.lineWidth=this.thick*bw*dp;
51		c.arc(centerX,centerY,radius,-Math.PI/2, 2*Math.PI);
52		c.stroke();
53		c.beginPath();
54		c.strokeStyle=this.colorFg;
55		c.lineWidth=this.thick*bw*dp;
56		if(this.round) c.lineCap="round";
57		if(this.indeterminate){
58			this.indetA=(this.indetA+0.07*this.animationSpeed)%(2*Math.PI);this.indetB=(this.indetB+0.14*this.animationSpeed)%(2*Math.PI);
59			c.arc(centerX,centerY,radius,this.indetA, this.indetB);
60			if(!this.noPercentage)this.text.innerHTML="";
61		}else{
62			if(this.spin&&!this.noAnimations)this.rot=(this.rot+0.07*this.animationSpeed)%(2*Math.PI)
63			c.arc(centerX,centerY,radius,this.rot-Math.PI/2, this.rot+this.aniP*(2*Math.PI)-Math.PI/2);
64			if(!this.noPercentage)this.text.innerHTML=Math.round(100*this.aniP)+" %";
65		}
66		c.stroke();
67		this.prevW=c.width; this.prevH=c.height; this.prevP=this.aniP;
68	}.bind(this);
69	this.draw();
70}
71RadialProgress.prototype={
72	constructor:RadialProgress,
73	setValue:function(p){this.progress=p<0?0:p>1?1:p;},
74	setIndeterminate:function(i){this.indeterminate=i;},
75	setText:function(t){this.text.innerHTML=t;}
76}