JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<progress value="0" min="0" max="100">

CSS

progress {
    background: #FAFAFA;
    border: 1px solid #2f4f57;
    -webkit-border-radius: 5px;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, rgb(255,255,255)),
        color-stop(0.77, rgb(238,238,238))
        );
    background-image:-moz-linear-gradient(
        center bottom,
        rgb(255,255,255) 23%,
        rgb(238,238,238) 77%
        );
}

progress::-webkit-progress-bar-value {
    background: rgb(164,217,242);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, rgb(164,217,242)),
        color-stop(0.77, rgb(134,190,204))
        );
    background-image:
        -moz-linear-gradient(
        center bottom,
        rgb(164,217,242) 23%,
        rgb(134,190,204) 77%
        );
}

progress:after {
    content: "(" attr(value) " of " attr(max) ")";
}

JavaScript

var progress = $$('progress')[0];

function update() {
    progress.set('value', i);
}

var i = 0;
for (i; i < 101; i++) {
    update.delay(200);
}