ClassyLoader
Beautiful loaders? Hell yea!

ClassyLoader is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that lets your add beautiful and animated loaders to your website.

• Beautifully animated
• Cross-browser compatible
• Lightweight & ultra customisable
• Minimal coding required – simply include the Javascript file
• Easy to customize

Download it

First you need to include the jQuery library, since ClassyLoader is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassyLoader javascript, which you can do it by adding the code below to your page.

<script src="js/jquery.classyloader.min.js"></script>

Next, you create the canvas element on which you want to trigger the plugin.

<canvas class="loader"></canvas>

As the last step, you trigger the plugin on the element you just created. In this case, we trigger it on the element with the class loader.

$('.loader').ClassyLoader();

If you want to manually trigger the loader, you can do it like this:

<canvas class="loader"></canvas>

var loader = $('.loader').ClassyLoader({
    animate: false,
    percentage: 0
});

This will show the loader at 0%, but not animate it. You can animate the loader by using the draw() method and specify the percent to draw. For example:

$('.customtrigger').on('click', function() {
    loader.setPercent(100).draw();
});
                                    

You can also use this shortened version:

$('.customtrigger').on('click', function() {
    loader.draw(100);
});
                                    

• Parameters

  ---

• width - width of the loader in pixels, default is 200
• height - height of the loader in pixels, default is 200
• animate - whether to animate the loader or not, default is true
• percentage - percent of the value, between 0 and 100, default is 100
• speed - miliseconds between animation cycles, lower value is faster, default is 1
• showRemaining - show the remaining percentage (100% - percentage), default is true
• start - start angle of the loader, default is left, can be left, right, top, bottom
• fontFamily - name of the font for the percentage, default is Helvetica
• showText - whether to display the percentage text, default is true
• fontSize - size of the percentage font, in pixels, default is 50px
• roundedLine - whether the line is rounded, in pixels, default is false
• diameter - diameter of the circle, in pixels, default is 80
• fontColor - color of the font in the center of the loader, any CSS color would work, hex, rgb, rgba, hsl, hsla, default is rgba(25, 25, 25, 0.6)
• lineColor - line color of the main circle, default is rgba(55, 55, 55, 1)
• remainingLineColor - line color of the remaining percentage (if showRemaining is true), default is rgba(55, 55, 55, 0.4)
• lineWidth - the width of the circle line in pixels, default is 5

• Methods

  ---

• show() - method that displays the initial loader but does not animate it. For ex. you can use the show() method to display the loader at 0% and animate it by using the draw() method after you set the percent to load
• draw() - animate the loader to the specified percentage
• setPercent() - sets the percentage value of the loader, so you can use the draw() method afterwards to animate the loader
• getPercent() - returns the percentage value of the loader

$('.loader2').ClassyLoader({
    percentage: 60,
    speed: 8,
    diameter: 70,
    showText: false,
    fontSize: '20px',
    roundedLine: true,
    fontColor: 'rgba(73, 125, 164, 0.3)',
    lineColor: 'rgba(73, 125, 164, 1)',
    remainingLineColor: 'rgba(73, 125, 164, 0.1)',
    lineWidth: 40
});

$('.loader3').ClassyLoader({
    speed: 40,
    fontFamily: 'Georgia',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(255,0,0,0.4)',
    lineWidth: 1,
    remainingLineColor: 'rgba(0,0,0,0.1)'
});

$('.loader4').ClassyLoader({
    speed: 20,
    diameter: 30,
    fontSize: '20px',
    fontFamily: 'Georgia',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(0,0,0,0.4)',
    percentage: 34,
    remainingLineColor: 'rgba(0,0,0,0.1)'
});

$('.loader5').ClassyLoader({
    speed: 100,
    diameter: 80,
    fontSize: '30px',
    fontFamily: 'Courier',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(0,0,0,0.7)',
    percentage: 80,
    lineWidth: 20,
    start: 'top',
    remainingLineColor: 'rgba(200,200,200,0.1)'
});