JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<div id="container">
  <h2><strong>Bar percentage</strong> inspired by this <a href=
    "http://dribbble.com/shots/1090476-Percentage-Bar">dribbble shot</a></h2>

  <div id="bar-1" class="bar-main-container azure">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="46"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-2" class="bar-main-container emerald">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="94"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-3" class="bar-main-container violet">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="47"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-4" class="bar-main-container yellow">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="85"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-5" class="bar-main-container red">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="33"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

</div>

CSS

#container { text-align: center; margin: 20px; }
h2 { color: #CCC; }
a { text-decoration: none; color: #EC5C93; }

.bar-main-container {
  margin: 10px auto;
  width: 300px;
  height: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  color: #FFF;
}

.wrap { padding: 8px; }

.bar-percentage {
  float: left;
  background: rgba(0,0,0,0.13);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 9px 0px;
  width: 18%;
  height: 16px;
}

.bar-container {
  float: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background: rgba(0,0,0,0.13);
  width: 78%;
  margin: 12px 0px;
  overflow: hidden;
}

.bar {
  float: left;
  background: #FFF;
  height: 100%;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

/* COLORS */
.azure   { background: #38B1CC; }
.emerald { background: #2CB299; }
.violet  { background: #8E5D9F; }
.yellow  { background: #EFC32F; }
.red     { background: #E44C41; }

JavaScript

$('.bar-percentage[data-percentage]').each(function() {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({
    countNum: 0
  }).animate({
    countNum: percentage
  }, {
    duration: 2000,
    easing: 'linear',
    step: function() {
      // What todo on every count
      var pct = Math.floor(this.countNum) + '%';
      progress.text(pct) && progress.siblings().children().css('width', pct);
    }
  });
});