Loading...

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.

Note:

This addon is included in the purchased package with its documentation.

Usage

You need to put the following scripts just before the <⁄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.

Tip:

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

     Arguments:

  • sliderAPI object

    mightySlider API generated by Calling new mightySlider class.

  • [ options ] object

    Object with plugin options. All options are documented below:


    Quick reference:

    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.