JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="b-item__barbox barbox">
  <div class="blackbar">
    <span data-width="25"></span>
  </div>
  <span class="barvalue"></span>
</div>
<div class="b-item__barbox barbox">
  <div class="blackbar">
    <span data-width="50"></span>
  </div>
  <span class="barvalue"></span>
</div>
<div class="b-item__barbox barbox">
  <div class="blackbar">
    <span data-width="75"></span>
  </div>
  <span class="barvalue"></span>
</div>

CSS

.b-item__barbox {
  display: block;
  margin-bottom: 20px;
}

.blackbar {
  height: 10px;
  width: 170px;
  display: inline-block;
  position: relative;
  float: left;
  margin: 9px 9px 0 0;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.blackbar > span {
  display: block;
  width: 0%;
  height: 8px;
  border-radius: 4px;
  padding: 0 1px;
  left: 1px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: green;
  background: -moz-linear-gradient( 0deg, rgb(14, 47, 60) 0%, rgb(58, 187, 148) 100%);
  background: -webkit-linear-gradient( 0deg, rgb(14, 47, 60) 0%, rgb(58, 187, 148) 100%);
  background: -ms-linear-gradient( 0deg, rgb(14, 47, 60) 0%, rgb(58, 187, 148) 100%);
  position: relative;
  overflow: hidden;
}

.barvalue {
  display: inline-block;
  vertical-align: top;
}

JavaScript

$(document).ready(function() {
  $(".blackbar > span").each(function() {
    var $span = $(this);
    var $barvalue = $span.closest('.b-item__barbox.barbox').find('.barvalue')
    var percentWidth = $span.data('width');
    $span.animate({
      width: percentWidth + "%"
    }, 800);
    $({
      countNum: 0
    }).animate({
      countNum: percentWidth
    }, {
      duration: 800,
      easing: 'linear',
      step: function() {
        $barvalue.text(Math.floor(this.countNum)).append(" %");
      },
      complete: function() {
        $barvalue.text(this.countNum).append(" %");
      }
    });

  });
});