<div class="main">
  <div id="inner">%</div>
</div>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Homenaje);

* { box-sizing:border-box; }

body { background: #f1f2f5; }

.main {
 	width: 200px;
  height: 200px;
  margin: 50px auto;
  border-radius: 50%;
  background: #166ccc;
  background: linear-gradient(40deg, #0a40be, #5ddff5);
  position: relative;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}

.main:after {
 	content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -12px;
  bottom: -12px;
  background: #d1d3d6;
  background: linear-gradient(#ccced0, #fff); 
  border-radius: inherit;
  z-index: -1;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}

#inner {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #f5f6f7;
  background: linear-gradient(#fcfcfd, #e8e9ec);
  margin-left: -80px;
  margin-top: -80px;
  
  box-shadow:
    0 0 10px rgba(0,0,0,0.5),
    0 4px 5px rgba(0,0,0,0.3),
    inset 0 -2px 1px rgba(0,0,0,0.2);
  
  line-height: 160px;
  text-align: center;
  color: #adaeb2;
  font-size: 60px;
  text-shadow: 0 -2px 1px rgba(0,0,0,0.4);
  font-family: 'Homenaje', sans-serif;
}
View Compiled
$(function(){
  
  var interval = setInterval(increment,100);
  var current = 0;

  function increment(){
    current++;
    $('#inner').html(current+'%'); 
    if(current == 100) { current = 0; }
  }

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js