A JavaScript Library For SVG Based Circles And Arcs – Sektor

Sektor is a really small JavaScript library that makes use of SVG to draw and animate circles and/or arcs. Perfect for loading indicator or pie / ring charts.

Basic usage:

Create an empty DIV container for the SVG circle/arc.

<div class='example'></div>

Download and put the JavaScript file sektor.js at the end of the document.

<script src='js/sektor.js'></script>

Create a new Sektor object and render a custom circle/arc inside the container you just created.

var mySektor = new Sektor('.example', {
    // options here
});

All available options to customize the SVG circle/arc.

var mySektor = new Sektor('.example', {
    size: 100,
    stroke: 10,
    arc: false,
    angle: 225,
    sectorColor: '#789',
    circleColor: '#DDD',
    fillCircle: true
});

Animate to a specified angle using the animateTo method.

mySektor.animateTo(angle);