A CodePen by dominicmagnifico. Stats - Lovely little stat counter using progress bars

index.html

<div class="container">
  <div class="progress_wrapper pink_blue">
    <span class="pink_blue tooltip">0%</span>
    <progress max="100" value="0" data-value="60" class="pink_blue">
    </progress>
  </div>
  <div class="progress_wrapper pink_blue">
    <span class="pink_blue tooltip">0%</span>
    <progress max="100" value="0" data-value="80" class="pink_blue">
    </progress>
  </div>
</div>

<button>See how good I am</button>

script.js

$(document).ready(function(){
  $('button').click(function(){
    $('progress').each(function(){
      var nuval = $(this).data('value');
      $(this).prev().css('left', nuval + '%').text(nuval);
      $(this).val(nuval);
    });
  });
});

style.scss

@import "compass";
html {
  background: #2b2b2b;
  body {
    width: 342px;
    height: 267px;
    display: block;
    margin: 0 auto;
    top: 50%;
    margin-top: 133.5px;
    text-align: center;
  }
}
.progress_controller {
  a {
    color: #afa5b4;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
    font-size: 13px;
    cursor: pointer;
    &:hover {
      color: #d7d2da;
    }
  }
}
.progress_wrapper {
  position: relative;
  width: 342px;
  .pink_blue{
    width: 340px;
    height: 14px;
    margin-bottom: 60px;
    @include appearance(none);
    border: none;
    padding: 1px;
    border-radius: 5px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.13);
    overflow: hidden;
    background-color: #000;
    &::webkit-progress-bar{
      background-color: #000;
      @include transition(4s);
    }
  }
  .tooltip {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    padding: 4px 0px;
    width: 39px;
    border-radius: 3px;
    border: 1px solid #000;
    box-shadow: 1px 0px 2px rgba(0,0,0,0.28), inset 1px 1px 1px rgba(255,255,255,0.05);
    position: absolute;
    top: -35px;
    left: 0%;
    margin-left: -10px;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
    &.pink_blue{
      @include background(linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), #473a4d);
      @include transition(.4s);
      left: 0%;
    }
  }
}
.progress_wrapper progress.pink_blue::-moz-progress-bar {
  background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), -moz-linear-gradient(left, #dc5e5b 0%, #4890be 100%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7);
  border-radius: 5px;
  position: relative;
}
.progress_wrapper progress.pink_blue::-webkit-progress-value {
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), -webkit-linear-gradient(left, #dc5e5b 0%, #4890be 100%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7);
  border-radius: 5px;
  position: relative;
}
.progress_wrapper progress.pink_blue::-webkit-progress-value:after {
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: 5px;
  top: 3px;
  background-color: #4079ad;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.37), inset 0px 1px 1px rgba(0,0,0,0.54);
}

button{
  @include transition(.4s);
  background:#1a1a1a;
  border:1px solid #000;
  box-shadow:0 0 5px #000;
  color:#ccc;
  padding:10px;
  &:hover {
    background:#fefefe;
    color:#2b2b2b;
  }
}