English · 中文

circle-progress-bar.js is a plugin that uses canvas to draw a circular progress bar and does not rely on any library. The effect is as follows:

git clone this repository, and then reference 'index.js' in the lib folder in your html.

<style>
#my-canvas {
/* Use css to control the width and height of canvas elements to solve the distortion problem of canvas itself */
width: 20px;
}
</style>
<canvas id="my-canvas" > 
</canvas>
<script src="./circle-progress-bar.js">
</script>
<script>
	var myCanvas = document.querySelector('#my-canvas');
	var c1 = new CircleProgressBar({
		canvasDom: myCanvas
	});
</script>

⚠️Tips: ---- Please note that the npm package name is mini-circle-progress-bar not circle-progress-bar!!

npm i mini-circle-progress-bar

ES Module:

import Bar from 'mini-circle-progress-bar'
var c1 = new Bar({
	canvasDom: myCanvas
});

CommonJS :

var Bar = require 'mini-circle-progress-bar'
var c1 = new Bar({
	canvasDom: myCanvas
});

{
	canvasDom: CanvasDomNeedToSet, // Required canvas dom
	// The following values are default values
	r: 30, // inner circle radius
	lineWidth: 5, // border width
	lineColor: '#3385ff', // border progress bar color
	lineBgColor: '#eeeeee', // border background color
	angle: Math.PI * 0.5, // The Angle to be rotated
	startAngle: -Math.PI * 0.5, // Start Angle
	duration: 1000, // Transition time, unit :ms
	text: ", // Text in a circle
	showPercent: true, // Whether to display the percentage 
	value
	textFontSize: 12, // Text size (px)
	textColor: '#3385ff', // Text color
	animationMode: 'linear' // 'linear' || 'accelerate' || 
	'decelerate' AnimationMode: 'Linear' // ||   
	'accelerate' || 'decelerate
}

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	10+ ✔

• The direction of operation of this plug-in is clockwise, counterclockwise is not supported for the time being;

• It is strongly not recommended to set the lineWitdh value to odd! Because the odd line width will appear blank in the canvas (because the remaining 0.5px width of the line color will fade)

• When showPercent is true and text: 'Example text' exists, 'example text' will not appear, only the percentage text will appear.

• How to solve the canvas distortion problem?
  The distortion problem is the existing problem of canvas itself. Using css to reduce the width and height of canvas can be done. For example, set parameters: r: 50, lineWidth: 10, then the width of canvas will be 50*2+10*2 === 120, then css set '#my-canvas {width: 60px; } 'is reduced to 60px.

• Can I set multiple lines of text?
  No, you can only set single lines of text.

• How to solve the problem of text wrapping?
  This plug-in does not support text wrapping. Excessive text will cause the display of the canvas to be abnormal. Solution: Set the parameter 'showPercent: false', then the user writes the text element and uses positioning to adjust the display to the center of the ring.

• How to adapt to mobile terminals?
  You can get the width of the canvas you want when the page is loaded, and then render the progress bar.