JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<div id="proBar" class="p">
    <div class="bg"></div>
    <div id="proCo" class="co"></div>
</div>

CSS

.p {
    margin-top:30px;
    margin-left:50px;
    position:relative;
    height:20px;
}
.bg, .co {
    position:absolute;
    width:100%;
    left:0;
}
.bg {
    background-color:#333;
    height:20px;
    top:0;
}
.co {
    background-color:#2A94D9;
    height:18px;
    top:1px;
    border-left:1px solid #333;
    width:0%;
}

JavaScript

$(function () {
    init();
});

function init() {
    var bar = $("#proBar"),
        co = $("#proCo"),
        barWidth = bar.width(),
        barX = bar.offset().left,
        isMousedown = false;
    bar.mousedown(function (e) {
        var x = e.pageX;
        var pencent = (x - barX) / barWidth;
        co.css("width", pencent * 100 + "%");
        isMousedown = true;
    });
    $(document).mousemove(function (e) {
        if (isMousedown && e.pageX < barX + barWidth) {
            var x = e.pageX;
            var pencent = (x - barX) / barWidth;
            co.css("width", pencent * 100 + "%");
        }
    }).mouseup(function (e) {
        isMousedown = false;
    });
}