JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="gauge  __type1">
    <div class="bar" style="width: 55%"></div>
</div>

<div class="gauge  __type2">
    <div class="bar" style="width: 42%"></div>
    <div class="dvdn" style="width: 42%"></div>
</div>

CSS

.gauge{
    position: relative;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 12px;
    width: 148px;
    height: 13px;
    background-size: 14px 14px;
    box-shadow: 0 2px 2px rgba(0,0,0, .6) inset;
}

.__type1{
    background-image:
        linear-gradient(
            45deg,
            #23C7D2 0,
            #23C7D2 25%,
            #1FB3BD 25%,
            #1FB3BD 50%,
            #23C7D2 50%,
            #23C7D2 75%,
            #1FB3BD 75%,
            #1FB3BD 100%);
}

.__type2{
    background-image:
        linear-gradient(
            45deg,
            #7955de 0,
            #7955de 25%,
            #6d4cc7 25%,
            #6d4cc7 50%,
            #7955de 50%,
            #7955de 75%,
            #6d4cc7 75%,
            #6d4cc7 100%);
}

.bar{
    border-radius: 12px 0 0 12px;
    max-width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #fcdb00 0, #fcdb00 50%, #e3c500 50%, #e3c500 100%);
    box-shadow: -1px 0 0 rgba(252,219,0, 1);
}

.near {
    border-radius: 12px;
}

.dvdn{
    position: absolute;
    top: 0;
    max-width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #ffffff 0, #ffffff 1px, transparent 1px, transparent 100%);
    background-size: 30px 100%;
}


body{
    background: beige;
}

JavaScript

function detectGauge(){
    // PC版
    // barの数値が97%以上だったらクラス付与する
    $('.bar').each(function(){
        var str = $(this).attr('style').split('width:').join('').split('%;').join('');
        parseInt(str, 10);

        if(str >= 97){
            $(this).addClass('near');
        } else {
            $(this).addClass('far');
        }
    });
}

$(function(){
    detectGauge();
});