JSFiddle - React, Tailwind, and code Playground

by imbolc

HTML

<progress value=3 max="5" />

CSS

progress[value] {
        width: 100px;
        height: 15px;
        border: 1px solid #ccc;
        border-radius: 2px;
        color: #fff;
        background: linear-gradient(
            to right,
            #003f9a 0%,
            #003f9a 19%,
            transparent 20%,
            #2871cc 21%,
            #2871cc 39%,
            transparent 40%,
            #468fea 41%,
            #468fea 59%,
            transparent 60%,
            #5099f4 61%,
            #5099f4 79%,
            transparent 80%,
            #78c1ff 81%,
            #78c1ff 100%
        );

        transform: rotate(180deg);
        appearance: none;
    }
    progress[value]::-webkit-progress-bar {
        background-color: transparent;
        position: relative;
    }
    progress[value]::-webkit-progress-value {
        width: 100%;
        background-color: #fff;
        background-size: 100%;
        position: relative;
        overflow: hidden;
    }