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
},90).startDrawing();
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 :
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
},90).startDrawing();
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
},6565);
// START DRAWING WHEN IT'S VISIBLE IN PAGE
document.addEventListener("scroll", function(){
if(window.scrollY >= window.scrollMaxY - 50 ){
if(!numberCircle.drawing ){
numberCircle.startDrawing();
}
}
});
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"),
{
valueType:TIME,
maxValue : STimeToTimeStamp("00:05:10"),
lineForce : 10,
withValue:true,
withAnimation : true,
animationDuration : STimeToTimeStamp("00:01:05")*1000
}
, STimeToTimeStamp("00:01:05"));
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 :{
color:"red",
lineForce : 5
},
withValue:true,
valueStyle : {
font: "25px arial"
},
// to set the angle between start and end of the circle
maxAngle:180
},40).startDrawing();
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"
},80).startDrawing();
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"
},
withValue:true,
valueStyle : {
font : "55px fontAwesome",
color: "green"
},
icon : "\uf093",
maxValue:100,
maxAngle:180,
startAngle : 180,
radius:70,
withAnimation : true ,
fillCirclRest:true,
fillRestStyle : {
lineForce :5,
color : "red"
},
color:"green",
animationDuration : 5500
},100).startDrawing();
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
withBorder:{
// width of the border
lineForce : 15
},
//write the value in middle of the circle
withValue : true,
valueStyle:{
color : "blue",
font : "900 15px arial"
},
// basic config of the circle
valueType : PERC,
maxValue : 100,
radius : 60
}
,80).startDrawing();