<div class="goal-tracker">
  <div class="progress-circle">

    <div class="outer">
      <div class="half spinner"></div>
      <div class="half filler"></div>
      <div class="mask"></div>
    </div>

    <div class="inner"></div>
    <div class="shadow"></div>

    <div class="goal-tracker__content">
      <div class="goal-tracker__data">
        <span class="goal-tracker__goal">Goal<b class="goal-tracker__val">100,000</b></span>
        <span class="goal-tracker__signed"><span class="percentage">75,000</span><b class="goal-tracker__signed">signed</b></span>
      </div>
    </div>

  </div>
</div>
// Demo Crud
html{background:#E9E9EA;}html,body{height: 100%;}body{display:flex;align-items:center;justify-content:center;}


// Goal Tracker Styles !REQUIRED!
// ======================================================

$goal-tracker-size: 8.25em;
$goal-tracker-text-color: #3E3E47;
$goal-tracker-fill-color: #BC2F63;
$goal-tracker-fill-bg: #D3D3D4;
$goal-tracker-innercircle-bg: #F1F1F2;

.goal-tracker__content {
  height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
	z-index: 500;
}

.goal-tracker__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: $goal-tracker-text-color;
}

.goal-tracker__goal {
	font-size: 11px;
  font-weight: normal;
	line-height: 1.1;
}

.goal-tracker__val {
	font-weight: normal;
}

.goal-tracker__val,
.goal-tracker__signed {
	display: block;
}

span.goal-tracker__signed {
  margin-top: 6px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
}

b.goal-tracker__signed {
  font-size: 11px;
  text-transform: uppercase;
}

.progress-circle {
  border-radius: 50%;
  display: inline-block;
  width: $goal-tracker-size;
  height: $goal-tracker-size;
  overflow: hidden;
  position: relative;
  z-index: auto;
}
.progress-circle .outer {
  background: $goal-tracker-fill-bg;
  width: $goal-tracker-size;
  height: $goal-tracker-size;
  overflow: hidden;
  z-index: 100;
}
.progress-circle .outer .mask {
  background: $goal-tracker-fill-bg;
  border-radius: $goal-tracker-size/2 0 0 $goal-tracker-size/2;
  position: absolute;
  width: $goal-tracker-size/2;
  height: $goal-tracker-size;
  top: 0;
  left: 0;
  z-index: 120;
}
.progress-circle .outer .half {
  box-sizing: border-box;
  height: $goal-tracker-size;
  position: absolute;
  width: $goal-tracker-size/2;
  height: $goal-tracker-size;
  top: 0;
  background: $goal-tracker-fill-color;
}
.progress-circle .outer .half.spinner {
	border-radius: 0 $goal-tracker-size/2 $goal-tracker-size/2 0;
	right: 0;
	transform-origin: left center;
	z-index: 110;
}
.progress-circle .outer .half.filler {
	border-radius: $goal-tracker-size/2 0 0 $goal-tracker-size/2;
	left: 0;
  transform-origin: right center;
	z-index: 130;
}
.progress-circle .inner {
	box-shadow: 0 0 0.5em rgba(248, 141, 141, 0.08);
	position: absolute;
  top: 50%;
	left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: $goal-tracker-size / 1.2;
  height: $goal-tracker-size / 1.2;
	z-index: 300;
	background: $goal-tracker-innercircle-bg;
}

.progress-circle .shadow {
	border-radius: 50%;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.17) inset;
	display: inline-block;
  width: $goal-tracker-size;
  height: $goal-tracker-size;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	background: transparent;
}
.progress-circle .inner,
.progress-circle .outer {
	display: inline-block;
	border-radius: 50%;
}
.percentage {
	font-size: 18px;
}
function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}

function setProgress(num) {

  var $spinner    = $('.progress-circle .spinner'),
      $filler     = $('.progress-circle .filler'),
      $percentage = $('.progress-circle .percentage'),
      initialNum  = $percentage.text();

	if (num < 0) num = 0;
	if (num > 100) num = 100;

	$({ numVal:initialNum }).animate({ numVal:num },{
		duration: 1000,
		easing: 'swing',

		step: function(currVal) {
			var amt = Math.ceil(currVal * 1000);

			$percentage.text(formatNumber(amt));

			if (currVal > 0 && currVal <= 50) {
        var spinnerDegs = -180 + ((currVal * 180) / 50);
				$filler.css('display', 'none');
				rotate($spinner, spinnerDegs);
			} else if (currVal > 50) {
				rotate($spinner, 0);
				$filler.css('display', '');
				var fillerDegs = 0 + ((currVal * 180) / 50);
				rotate($filler, fillerDegs);
			}
		}
	});
}

function rotate($el, deg) {
	$el.css({
		'-webkit-transform': 'rotate(' + deg + 'deg)',
		'-moz-transform': 'rotate(' + deg + 'deg)',
		'-ms-transform': 'rotate(' + deg + 'deg)',
		'-o-transform': 'rotate(' + deg + 'deg)',
		'transform': 'rotate(' + deg + 'deg)'
	});
}

setProgress(80.50);

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