ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

progressbar.js (2937B)

      1 /**
      2  * jQuery Line Progressbar
      3  * Author: KingRayhan<rayhan095@gmail.com>
      4  * Author URL: http://rayhan.info
      5  * Version: 1.0.0
      6  */
      7 
      8 (function ($) {
      9     'use strict';
     10 
     11 
     12     $.fn.LineProgressbar = function (options) {
     13 
     14          options = $.extend({
     15              min: 0,
     16              max: 100,
     17              stop: 50,
     18              ShowProgressCount: true,
     19              duration: 2000,
     20              color: '#654ea3',
     21              backgroundColor: '#f5f5f5',
     22              suffix: '%',
     23              text: 'Category',
     24              radius: '0px',
     25              height: '10px',
     26              width: '100%'
     27         }, options);
     28 
     29         $.options = options;
     30         return this.each(function (index, el) {
     31             // Markup
     32             $(el).html('<div class="progressbar"><div class="counterText"></div><div class="percentCount"></div><div class="proggress"></div></div>');
     33 
     34 
     35 
     36             var progressFill = $(el).find('.proggress');
     37             var progressBar = $(el).find('.progressbar');
     38             var progressText = $(el).find('.counterText');
     39 
     40 
     41             progressFill.css({
     42                 backgroundColor: options.color,
     43                 height: options.height,
     44                 borderRadius: options.radius
     45             });
     46             progressBar.css({
     47                 width: options.width,
     48                 backgroundColor: options.backgroundColor,
     49                 borderRadius: options.radius
     50             });
     51 
     52             progressText.html(options.text);
     53 
     54             // Progressing
     55             progressFill.animate(
     56                 {
     57                     width: options.stop + "%"
     58                 },
     59                 {
     60                     step: function (x) {
     61                         if (options.ShowProgressCount) {
     62                             $(el).find(".percentCount").text(Math.round(x) + options.suffix);
     63                         }
     64                     },
     65                     duration: options.duration
     66                 }
     67             );
     68             ////////////////////////////////////////////////////////////////////
     69         });
     70     }
     71     $.fn.progressTo = function (next) {
     72 
     73         var options = $.options;
     74 
     75         return this.each(function (index, el) {
     76 
     77             var progressFill = $(el).find('.proggress');
     78             var progressBar = $(el).find('.progressbar');
     79 
     80             progressFill.animate(
     81                 {
     82                     width: next + "%"
     83                 },
     84                 {
     85                     step: function (x) {
     86                         if (options.ShowProgressCount) {
     87                             $(el).find(".percentCount").text(Math.round(x) + options.suffix);
     88                         }
     89                     },
     90                     duration: options.duration
     91                 }
     92             );
     93             ////////////////////////////////////////////////////////////////////
     94         });
     95     }
     96 
     97 })(jQuery);