JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div class="progress-bar">
    <div class="bar">
        <div class="progress-tip"><div class="tip-arrow"></div>54</div>
        <div class="progress normal min" style="width: 33.3%;"></div>
        <div class="progress moderate" style="width: 33.3%;"></div>
        <div class="progress high max" style="width: 33.3%;"></div>
    </div>
</div>

CSS

body { margin: 100px; color: #555; font-size: 13px;}

.progress-bar {    
    background-image: linear-gradient(top, #eee, #f7f7f7);
    margin-left: 1%;
    padding: 3px;
    width: 25%;
    border-radius: 20px;
    
    .progress-tip {
        border: 1px solid #ccc;
        padding: 7px 10px;
        position: absolute;
        top: -40px;
        left: 10%;
        margin-left: -17px;
        border-radius: 3px;
        box-shadow: inset 0 -3px rgba(0,0,0,.03), 0 1px 5px rgba(0,0,0,.1);
        
            .tip-arrow {
                position: absolute;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 5px 0;
                border-top-color: #ccc;
                bottom: -6px;
                left: 50%;
                margin-left: -5px;
            }
    }
    
    .bar {
        background-color: #ddd;
        background-image: linear-gradient(top, #ddd, #eee);
        height: 10px;
        position: relative;
        border-radius: 20px;
        box-shadow: inset 0 0 2px rgba(0,0,0,.2);
    }
    
    .progress {
        float: left;
        height: 100%;
        width: 0%;
        border-radius: 20px;
        box-shadow: inset 0 0 1px rgba(0,0,0,.8);
        
        & + .progress {
            border-radius: 0;
        }
        
        &.min {
            border-radius: 20px 0 0 20px;
        }
        
        &.max{
            border-radius: 0 20px 20px 0;
        }
        
        &.normal {
            background-color: #a2d06a;
        }
        
        &.borderline {
            background-color: #6fbde9;
        }
        
        &.some {
            background-color: #ecdd5b;
        }
        
        &.moderate {
            background-color: #e89842;
        }
        
        &.high {
            background-color: #e34c4c;
        }
    }
}

JavaScript

positionTip($('.progress-tip'), 40, { min: 20, max: 80 });

function positionTip(el, value, range) {
    var position = ((value - range.min) / (range.max - range.min)) * 100;
    el.css({ left: position + '%', marginLeft: el.outerWidth() / -2 });
}