JSFiddle - React, Tailwind, and code Playground

meter

by Jennifer Perrin

HTML

<div class="meter"> <span style="width:10%"></span>
    <p></p>
</div>

CSS

div.meter {
    position: relative;
    width: 100%;
    height: 25px;
    margin-top: 50px;
    background: #555;
}
div.meter span {
    display: block;
    height: 100%;
    animation: grower 1s linear;
    -moz-animation: grower 1s linear;
    -webkit-animation: grower 1s linear;
    -o-animation: grower 1s linear;
    position: relative;
    top: 0;
    left: 0;
    background: #cc3d3d;
}
div.meter span:before {
    content:'';
    display: block;
    width: 100%;
    height: 50%;
    position: relative;
    top: 50%;
    background: rgba(0, 0, 0, 0.03);
}
div.meter p {
    position: absolute;
    top: 0;
    margin: 0 10px;
    line-height: 25px;
    font-family:'Helvetica';
    font-weight: bold;
    -webkit-font-smoothing: antialised;
    font-size: 15px;
    color: #fff;
}
@keyframes grower {
    0% {
        width: 0%;
    }
}
@-moz-keyframes grower {
    0% {
        width: 0%;
    }
}
@-webkit-keyframes grower {
    0% {
        width: 0%;
    }
}
@-o-keyframes grower {
    0% {
        width: 0%;
    }
}

JavaScript

var bar = $('span');
var p = $('p');

var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length - 1);


var interval;
var start = 0;
var end = parseInt(width);
var current = start;

var countUp = function () {
    current++;
    p.html(current + "%");

    if (current === end) {
        clearInterval(interval);
    }
};

interval = setInterval(countUp, (1000 / (end + 1)));