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();

• 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 #000000
• lineColor - line color of the main circle, default is #000000
• remainingLineColor - line color of the remaining percentage (if showRemaining is true), default is #000000
• lineWidth - the width of the circle line in pixels, default is 5

$('.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)'
});