Easy pie/donut time loader is a mightySlider addon that uses the canvas element to render simple pie/donut time loaders for mightySlider cycling time. These loaders are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp loaders even on retina displays.
This addon is included in the purchased package with its documentation.
<⁄body>
<script type="text/javascript"> jQuery(document).ready(function($) { // Calling new mightySlider class var sliderAPI = new mightySlider('.frame', { cycling: { cycleBy: 'slides', pauseTime: getRandomInt(5000, 10000) } }).init(); // Add on time loader new mightySliderTimerLoader(sliderAPI); }); </script>
First make sure the HTML5 doctype is set as the very first line on the page:
<!DOCTYPE html>
Include jQuery 1.7 or above in the header. Going with the latest release is recommended for optimal performance, the Google CDN can be used to include this file.
Download
mightySlider and upload the files from
the package to your server. Include
mightyslider.min.js
and mightyslider.timeloader.addon.min.js
below jQuery. Also include
mightyslider.css
and make sure the include paths point to the locations where the files have been uploaded.
<!-- mightySlider Animate Plugin requires jQuery 1.7+ and mightySlider 2+ --> <!-- If you already have jQuery on your page, you shouldn't include it second time. --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- mightySlider JS script file --> <script type="text/javascript" src="mightyslider/src/js/mightyslider.min.js"></script> <!-- mightySlider Time Loader JS script file --> <script type="text/javascript" src="mightyslider/src/js/mightyslider.timeloader.addon.min.js"></script> <!-- mightySlider basic stylesheet with skins imported --> <link rel="stylesheet" type="text/css" href="mightyslider/src/css/mightyslider.css"/>
That's it! mightySlider Time Loader should now be ready for use.
Gzipping helps reduce the total filesize to just 0.9kb.
You just need to call Time Loader after calling mightySlider and use the mightySlider generated API.
new mightySliderTimerLoader(sliderAPI [, options ]);
sliderAPI
object
mightySlider API generated by Calling new mightySlider class.
[ options ]
object
Object with plugin options. All options are documented below:
mightySlider Animate Plugin call with all default options as defined in the source.
new mightySliderTimerLoader(sliderAPI, { mode: 'pie', // The time loader display type. Possible values are: 'pie', 'donut'. barColor: '#ef1e25', // The color of the circular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color. trackColor: '#f9f9f9', // The color of the track for the bar, false to disable rendering. scaleColor: '#dfe0e0', // The color of the scale lines, false to disable rendering. txtColor: false, // The color of the percent text, false to disable rendering. scaleLength: 5, // The size of the scale lines. lineCap: 'round', // Defines how the ending of the donut line looks like. Possible values are: 'butt', 'round' and 'square'. lineWidth: 3, // Width of the donut line in px. trackSpace: 0, // The space between the track and the circular bar. size: 50, // Size of the loader in px. It will always be a square. rotate: 0, // Rotation the loader in degree. position: 'top right', // Postion of the loader in slider. Possible values are: 'top', 'middle', 'bottom', 'left', 'center', 'right'. offset: 10, // The space between loader and the slider. txtMask: '{d}%', // The percent text mask for display. '{d}' is the percent number. fontSize: '13px', // The percent text font size. fontWeight: 'normal', // How thick or thin characters in percent text should be displayed. Possible values are: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal'. reverse: false // Reverse the time loader or not. });
mode
string
Default: pie
The time loader display type. Possible values are: 'pie', 'donut'.
barColor
string
function
boolean
Default: #ef1e25
The color of the circular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
barColor: '#000'
barColor: function(percent) { return percent <= 0.5 ? '#000' : '#F00'; }
trackColor
string
boolean
Default: '#f9f9f9'
The color of the track for the bar, false to disable rendering.
trackColor: 'rgba(0, 0, 0, 0.5)'
trackColor: false
scaleColor
string
boolean
Default: '#dfe0e0'
The color of the scale lines, false to disable rendering.
scaleColor: 'rgba(0, 0, 0, 0.5)'
scaleColor: false
txtColor
string
boolean
Default: false
The color of the percent text, false to disable rendering.
txtColor: 'rgba(0, 0, 0, 0.5)'
txtColor: '#000'
scaleLength
number
Default: 5
The size of the scale lines.
lineCap
string
Default: 'round'
Defines how the ending of the donut line looks like. Possible values are: 'butt', 'round' and 'square'.
lineWidth
number
Default: 3
Width of the donut line in px.
trackSpace
number
Default: 0
The space between the track and the circular bar.
size
number
Default: 50
Size of the loader in px. It will always be a square.
rotate
number
Default: 0
Rotation the loader in degree.
position
string
Default: 'top left'
Postion of the loader in slider. Possible values are: 'top', 'middle', 'bottom', 'left', 'center', 'right'.
position: 'middle center'
position: 'bottom right'
offset
number
Default: 10
The space between loader and the slider.
txtMask
string
Default: '{d}%'
The percent text mask for display. '{d}' is the percent number.
fontSize
string
Default: '13px'
The percent text font size.
fontWeight
string
Default: 'normal'
How thick or thin characters in percent text should be displayed. Possible values are: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal'.
reverse
boolean
Default: false
Reverse the time loader or not.