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.

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

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

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:

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
• 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,
    remainingLineColor: 'rgba(200,200,200,0.1)'
});