Draw Animated Circles From A Given Angle Or Value – Circles.js

Circles.js is a vanilla JavaScript plugin used to draw animated, mobile-friendly circles from a given angle or percentage value using Canvas.

Ideal for progress bar, loading indicator, countdown timer, stopwatch and much more.

How to use it:

Download and import the Circles.js library.

<script src="circles.js"></script>

Create an HTML5 canvas element on which you want to draw the circle.

<canvas id="example"></canvas>

Draw a circle from a given percentage value (90%).

new Circle(document.querySelector("#example"),{
    //set type of value which the circle will present
    valueType : PERC,
    //set max value
    maxValue : 100
},90).startDrawing();

Draw a number counter that fills the arc after init.

new Circle(document.querySelector("#example"),{
    valueType : NUMB,
    maxAngle : (240) ,
    maxValue : 10000
},9090).startDrawing();

Draw a stopwatch.

new Circle(document.querySelector("#example"),{
    valueType:TIME,
    maxValue : STimeToTimeStamp("00:05:10"),
    withValue:true,
    withAnimation : true,
    animationDuration : STimeToTimeStamp("00:01:05")*1000
}, STimeToTimeStamp("00:01:05"));