JSFiddle - React, Tailwind, and code Playground

by AndrewZhang

HTML

<div id="progressbar"></div>

CSS

.progressbar {
    border: 1px solid #acacac;
    border-radius: 8px;
    box-shadow: -1px 1px 5px #8c8c8c inset;
    background-color:#dcdcdc;
    overflow: hidden;
}
.progressbar-value {
    border-radius: 8px;
    background-color: #8EEB00;
}

JavaScript

/**
 * jquery progressbar plugin
 * company: tribal-china
 * author: Andrew
 * date: 2011-09-25
 * version: 1.1.0
 */
;
(function($) {

    // all plugin method
    var methods = {
        // init progress bar 
        init: function(options) {

            var opts = $.extend({}, $.fn.progressbar.settings, options);

            return this.each(function() {

                var data = $(this).data('progressbar');

                // check whether plugin has been init
                if (!data) {

                    var percent = '0%';
                    if (opts.value > opts.min) {
                        percent = Math.round((opts.value - opts.min) / (opts.max - opts.min) * 100) + '%';
                    }

                    var $barCon = $(this).css({
                        width: opts.width,
                        height: opts.height
                    }).addClass('progressbar').data('progressbar', {
                        min: opts.min,
                        max: opts.max,
                        value: opts.value,
                        started: false
                    });

                    var $bar = $('<div />').css({
                        width: percent,
                        height: opts.height
                    }).addClass('progressbar-value').appendTo($barCon);

                    // bind custom event with namespace '.progressbar'
                    $barCon.bind('change.progressbar', opts.change).bind('complete.progressbar', opts.complete).bind('start.progressbar', opts.start);
                }
            });
        },

        // get min value
        getMin: function() {
            return this.data('progressbar').min;
        },

        // get max value
        getMax: function() {
            return this.data('progressbar').max;
        },

        // get current value
        getValue: function() {
            return this.data('progressbar').value;
        },

        // set current value
        setValue:...