ClassyLoader
Beautiful loaders? Hell yea!
Introduction
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
License
This jQuery plugin is distributed under the MIT license. Enjoy!Demo
Setup
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);
});
Options
-
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
Example
$('.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)'
});