JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<html>
    <body style="height:9999px;">
        <div class="meter" style="margin-top:300px"><span style="width: 40%"></span></div>
    </body>
</html>

CSS

@charset "UTF-8";

.meter { 
            height: 10px;
            padding-top: 4px;
            padding-left: 2px;
            position: relative;
            background: #232227;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            -webkit-box-shadow: inset 0 -2px 2px rgba(0,0,0,0.75);
            -moz-box-shadow   : inset 0 -2px 2px rgba(0,0,0,0.75);
            box-shadow        : inset 0 -2px 2px rgba(0,0,0,0.75);
        }
        .meter > span {
            display: block;
            height: 70%;
               -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 20px;
                   -moz-border-radius-topright: 20px;
                -moz-border-radius-bottomright: 20px;
                       border-top-right-radius: 20px;
                    border-bottom-right-radius: 20px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(171,171,171);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(171,171,171)),
              color-stop(1, rgb(108,108,108))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(171,171,171) 37%,
              rgb(108,108,108) 69%
             );
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow: 
              inset 0 2px 9px ...

JavaScript

$(function() {
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                 width: $(this).data("origWidth")
                 }, 1200);
    });
});