Circles Examples

Example of percentage circle

in this example the library draw a circle with arc of 90% with default settings of canvas ,with out write the value on middle of the circle

	new Circle(document.querySelector("#basic-usage"),{
		//set type of value which the circle will present
		valueType : PERC,
		//set max value
		maxValue : 100


advanced usage

Example of percentage circle with animation

in this example the library will draw a percentage circle , with styling the circle . and animate drawing from 0 to the percentage , default animation duration is 1s

default colors of the circle :

  • filled arc : black
  • unfilled arc : gray

	new Circle(document.querySelector(".addv1"),
		//border width of the circle
		lineForce : 10 ,
		//color of the circle
		color : "gold",
		//to write percentage in middle
		withValue : true,
		//to animate filling circle
		withAnimation : true ,
		//styling percentage
		valueStyle : {
			// set font style
			font:"20px Arial",
			// set color
			color : "red"
		// set angle of start drawing the circle
		startAngle : 46,
		// type of value that you wanna the circle present
		valueType : PERC,
		// max value
		maxValue : 100,
		// animation duration
		animationDuration : 5000

Example of number circle

circle with filling the rest, customizing value and start drawing when the canvas visible on the page for the first time

	var numberCircle = new Circle(document.querySelector(".addv2"),
		//set circumference circle width
		lineForce :10 ,
		// circle color
		color : "#0093b3",
		//to write the value in middle of the circle
		withValue : true,
		//to animate drawing circle
		withAnimation : true ,
		//to start filling the circle from 150 degree
		startAngle : 150,
		//Style of the written value in the middle
		valueStyle : {
			//to set a color (default black)
			color : "#0093b3",
			//to set a font default 10px arial
			font:"30px Arial"
		//to set max angle of the circle to fill
		maxAngle : (240) ,
		//to fill the unfilled part of the circle
		fillCirclRest: true,
		//to styling this part
		fillRestStyle : {
			color :"#86e1ff"
		// type of value which the circle present
		valueType : NUMB,
		// max value
		maxValue : 10000

	document.addEventListener("scroll", function(){
	if(window.scrollY >= window.scrollMaxY - 50 ){
		if(!numberCircle.drawing ){


Example of time circle

in this example we will use circles library to draw a time circle . so to do that you need to set type of value which you wanna circle present using attribute valueType : TIME , maxValue take timeStamp in seconds you can pass an int or call STimeToTimeStam function take as argument string time on form hours:minutes:second

	new Circle(document.querySelector(".addv3"),
		maxValue : STimeToTimeStamp("00:05:10"),
		lineForce : 10,
		withAnimation : true,
		animationDuration : STimeToTimeStamp("00:01:05")*1000
	, STimeToTimeStamp("00:01:05"));


Example of percentage circle with end line feature

in this example we will draw a percentage circle with end line . you have to set withEndLine attribute a true , you can styling this line with lineEndStyle , which take an object contain color and lineForce attributes .

note : this example we draw a half circle with to do that you have to set maxAngle less than 180 degree and height of canvas equal half of width

	new Circle(document.querySelector(".addv4"),
			valueType: PERC,
			lineForce : 20,
			maxValue : 100,
			// to draw the separator between filled arc and unfilled arc
			withEndLine : true,
			// to styling separator
			lineEndStyle :{
				lineForce : 5
			valueStyle : {
				font: "25px arial"
			// to set the angle between start and end of the circle


circle with font Awesome

in this example we will draw a circle with font awesome icon in middle . first of all set the basic configuration of the circle then set valueStyle font : [size] fontAwesome you can use color attribute to change the default color . to select the icon set attribute icon : [unicode character] add this attribute in the main object style

Note : the library using font awesome 4.7 font awesome 5 or higher not supported

	new Circle(document.querySelector(".addv5"),{
		valueType : NUMB ,
		lineForce : 10 ,
		// to styling the value
		valueStyle :{
			font : "50px fontAwesome",
			color : "red"
		// to draw icon
		withValue: true,
		maxValue : 100,
		// set the icon to draw in middle
		icon : "\uf242"


circle with corner value :

we will draw a circle with font awesome icon in middle to show the progression of an upload and write the percentage of uploaded file in left top corner

new Circle(document.querySelector(".addv6"),{
	valueType : PERC,
	lineForce: 5,
	// tell the library you wanna write the value corner
	cornerValue : true,
	// select the corner
	atCorner : leftTop,
	// styling the value to write
	cornerValueStyle : {
		font : "15px arial",
		color : "green"
	valueStyle : {
		font : "55px fontAwesome",
		color: "green"
	icon : "\uf093",
	startAngle : 180,
	withAnimation : true ,
	fillRestStyle : {
		lineForce :5,
		color : "red"
	animationDuration : 5500


Example of circle with a border

in that example we'll draw a percentage circle with a border . we'll use withBorder attribute to draw the border , this attribute take an object contain the following attributes lineForce : [number] to determine width of the border , top border and the bottom border of the circe ,each of them take the half of lineForce attribute . color : [string] to change to default color of the border which is gray color .

new Circle(document.querySelector(".addv7"),
	// styling the circle
	lineForce : 5 ,
	color : "blue",
	//styling the border
		// width of the border
		lineForce : 15
	//write the value in middle of the circle
	withValue : true,
		color : "blue",
		font : "900 15px  arial"
	// basic config of the circle
	valueType : PERC,
	maxValue : 100,
	radius : 60