claireso / progressarc

ProgressArc is a jQuery plugin that allows you to draw a visual loader in canvas.

progressArc

ProgressArc is a jQuery plugin that allows you to draw a visual loader.

You can control the loader using the setProgress custom event and get the current progress value using the change custom event.

The user can interact with the arc using his mouse or his finger. So you can use this plugin not just for visual loader but like for exemple a player volume control (like on the pitchfork player ).

Documentation

Basic usage

$("canvas").progressArc({
    styles: {
        fgColor : "#619fb9",
        bgColor : "#333",
        strokeWidth: 60
    },
    data: {
        start:40
    }
});

Options

• fgColor : the color of the arc
• bgColor : the color of the background circle
• strokeWidth : width of the stroke arc
• data.start : the initial position of the arc
• cursor : boolean to enable/disable the user to move the arc with the mouse (or finger) (default : true)

Events

You can dynamically update the position of the arc using the setProgress event:

var $canvas = $("canvas");
$canvas.trigger('setProgress',[60]);

To know the current value of the arc, just listen the change event:

var $canvas = $("canvas");
$canvas.on('change',function(e, val){
    //code
});