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

Category: Chart & Graph , Javascript | March 5, 2019
Author: SuicV
Views Total: 471 views
Official Page: Go to website
Last Update: March 5, 2019
License: GPL-3.0


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

Draw a number counter that fills the arc after init.

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

Draw a stopwatch.

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

You Might Be Interested In:

Leave a Reply