/** * jQuery Line Progressbar * Author: KingRayhan * Author URL: http://rayhan.info * Version: 1.0.0 */ (function ($) { 'use strict'; $.fn.LineProgressbar = function (options) { options = $.extend({ percentage: null, ShowProgressCount: true, duration: 1000, // Styling Options fillBackgroundColor: '#3498db', backgroundColor: '#EEEEEE', radius: '0px', height: '10px', width: '100%' }, options); $.options = options; return this.each(function (index, el) { // Markup $(el).html('
'); var progressFill = $(el).find('.progressbar_proggress'); var progressBar = $(el).find('.progressbar'); var tagText = $(el).find('.progressbar_tagText'); tagText.text($(el).data('tagtext')); progressFill.css({ backgroundColor: options.fillBackgroundColor, height: options.height, borderRadius: options.radius }); progressBar.css({ width: options.width, backgroundColor: options.backgroundColor, borderRadius: options.radius }); // Progressing progressFill.animate( { width: options.percentage + "%" }, { step: function (x) { if (options.ShowProgressCount) { $(el).find(".progressbar_percentCount").text(Math.round(x) + "%"); } }, duration: options.duration } ); //////////////////////////////////////////////////////////////////// }); } $.fn.progressTo = function (next) { let options = $.options; return this.each(function (index, el) { var progressFill = $(el).find('.progressbar_proggress'); var progressBar = $(el).find('.progressbar'); var tagText = $(el).find('.progressbar_tagText'); tagText.text($(el).data('tagtext')); progressFill.animate( { width: next + "%" }, { step: function (x) { if (options.ShowProgressCount) { $(el).find(".progressbar_percentCount").text(Math.round(x) + "%"); } }, duration: options.duration } ); //////////////////////////////////////////////////////////////////// }); } })(jQuery);