CodePen

HTML

            
              <div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="45">0</div>
</div>
<div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="55">0</div>
</div>
<div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="65">0</div>
</div>
<div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="75">0</div>
</div>
<div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="85">0</div>
</div>
<div class="progress_circle">
  <div class="progress_percentage" data-end-percentage="95">0</div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .progress_circle {
	width: 40px;
	height: 42px;
	background: white url('data:image/png;base64,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') no-repeat 0px 0px;
  overflow: hidden;
}

.progress_percentage {
	margin: 6px 0 0 6px;
  font-size: 11px;
  color: white;
  text-align: center;
  background: black;
  height: 20px;
  width: 28px;
  border-radius: 50%;
  padding-top: 8px;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var progressCircle = $('.progress_circle'),
		progressPercentage = $('.progress_percentage'),
    endPercentage = progressPercentage.data('end-percentage');

function timer() {
  progressCircle.each(function() {
    var progressPercentage = $(this).children('.progress_percentage'),
		    endPercentage = progressPercentage.data('end-percentage'),
        i = 0,
        progressContainer = $(this);
    setInterval(function () {
	    if (i > endPercentage) {
		    clearInterval(timer);
		    return;
	    }
	    var percentage = i;
	    progressPercentage.html(percentage);
		  // update progress bar every 10%
	    if ((percentage > 0) && (percentage % 10 === 0)) {
		  // piWidth - width of a single block of the progress bar
		    progressContainer.css('background-position', '0px -' + (percentage / 10 * 42) + 'px');
	    }
 	    i++;
    }, 100);
  });
}

timer();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................