JSFiddle - React, Tailwind, and code Playground

by Dinesh Patra

HTML

<div class="progress">
    <div class="progress-bar"></div>
</div>
<button class="btn">btn</button>

CSS

.progress {
    width: 500px;
    height: 30px;
    border: rgb(100, 100, 100)  1px solid;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.progress-bar {
    width: 10px;
    height: 100%;
    background: blue;
    position: absolute;
    left: -10px;
}

JavaScript

/**
     * Function to Update the status box
     *
     * @returns {undefined|Boolean}
     *
     * @author BDT
     */
    function progressBar(conf) {
        this.width = conf.width;
        var maxTime = conf.maxTime;
        this.maxSec = maxTime * 60;
        this.step = this.width / this.maxSec;
        this.timer = conf.startTime * 60;
        this.left = 0;
        var obj = this;

        var moveInstance = undefined;

        /**
         * Function to move the overlay
         *
         * @returns {undefined|Boolean}
         *
         * @author BDT
         */
        function move() { 
            moveInstance = setInterval(function () {
                obj.timer += 1;
                obj.left += obj.step;
               
                var remaining = obj.maxSec - obj.timer; 
                $(".ps-timer-progress-bar").attr('progress-time', secToMin(remaining));
                $(".progress-bar").css({'left': obj.left});

                // If the timer expires
                if (obj.timer >= obj.maxSec) {
                    clearInterval(moveInstance);
$(".ps-timer-progress-bar").attr('progress-time', '');

                    // If the timer countdown completed
                    if (typeof (conf.onFinish) == 'function') {
                        conf.onFinish();
                    }
                }
            }, 50);
        }

        // Creating start instance
        this.start = function () {
            obj.left = conf.startTime * 60;
            obj.timer = conf.startTime * 60;alert( obj.timer);
            move();
        }

        /**
         * Function to convert seconds to minute
         *
         * @param number seconds
         * @returns var The minutes and seconds string
         *
         * @author BDT
         */
        function secToMin(seconds) {
            var sec = seconds % 60;

            /* Appending zero to seconds value
             * if it is single digit
             */
            if...