jQuery Pie-Loader

A lightweight jQuery plugin to animate a SVG pie loader

Demo page

http://codepen.io/toplefty/pen/OMxGVx?editors=0110

Installation

Include script after the jQuery library:

<script type="text/javascript" src="/path/to/jquery-pie-loader.js"></script>

Recommended : use the scss file and customize easily your pie colors.

Alternatively you can include the css

<link rel="stylesheet" href="/path/to/jquery-pie-loader.css"></script>

Usage

<figure id="my-item" class="pie-loader"></figure>

$('#my-item').pieLoader( options )

Options

easing (string)

An optional parameter to specify the animation easing. Defaults to easeOutCubic.

easing: 'swing'

duration (number)

An optional parameter specifying the length of the animation in milliseconds (ms). Defaults to 2000 (2 seconds).

duration: 2000

dimension (number)

This parameter specifies the dimension of the pie, in pixels. Defaults to 200px

dimension: 300

percentage (number)

The final value that you want the pie to be animated to.

percentage: 42

onStart (function)

A function to be called when the animation beings.

onStart: function(){
	alert('The animation started')
}

onComplete (function)

A function to be called when the animation is complete.

onComplete: function(){
	alert('The animation is over')
}

License

MIT License (c) Antonin Cezard