SOURCE

//SVG gauges script
var firstGauge = document.querySelector('.container:first-of-type .progress');
var firstTarget = parseInt(firstGauge.getAttribute('data-target'));
var firstGaugeReadout = document.querySelector('.container:first-of-type .percentage > .value');

var secondGauge = document.querySelector('.container:nth-of-type(2) .progress');
var secondTarget = parseInt(secondGauge.getAttribute('data-target'));

var thirdGauge = document.querySelector('.container:nth-of-type(3) .progress');
var thirdTarget = parseInt(thirdGauge.getAttribute('data-target'));

var fourthGauge = document.querySelector('.container:nth-of-type(4) .progress');
var fourthTarget = parseInt(fourthGauge.getAttribute('data-target'));

//variables
var gaugeR = parseInt(document.querySelectorAll('circle')[0].getAttribute('r'));
var gaugeC = gaugeR * Math.PI * 2;
var animationDuration = 1.5;

//init svg circles
var circles = document.querySelectorAll('circle');
var gauges = document.querySelectorAll('.progress');
TweenMax.set(circles, {
  strokeDashoffset: gaugeC
});

TweenMax.set(gauges, {
  attr: {
    'stroke-dasharray': gaugeC + ' ' + gaugeC
  }
});

//calculate the offset
function calculateOffset(t, c) {

  var target = c - (c * t) / 100;
  return target;

}

//timeline
var tl = new TimelineMax();

//first gauge animation
tl.to(firstGauge, animationDuration, {

  strokeDashoffset: calculateOffset(firstTarget, gaugeC),
  ease: Bounce.easeOut,
  onUpdate: function() {

    var currentStrokeOffset = parseInt(firstGauge.style.strokeDashoffset);
    firstGaugeReadout.textContent = Math.round(100 - (currentStrokeOffset * 100) / gaugeC);

  }

});

//second gauge animation
tl.to(secondGauge, animationDuration, {

  strokeDashoffset: calculateOffset(secondTarget, gaugeC),
  ease: Power3.easeInOut

});

//third gauge animation
tl.to(thirdGauge, animationDuration, {

  strokeDashoffset: calculateOffset(thirdTarget, gaugeC),
  ease: Elastic.easeOut.config(1, 0.4)

});

//fourth gauge animation
tl.to(fourthGauge, animationDuration, {

  strokeDashoffset: calculateOffset(fourthTarget, gaugeC),
  ease: SlowMo.ease.config(0.1, 1.3, false)

});

<div class="container">

  <div class="gauge-container">
    <svg class="gauge" viewBox="0 0 150 150" preserveAscpectRatio="xMinYMin Meet">
			<circle class="rail" r="67" cx="75" cy="75" />
			<circle class="progress" r="67" data-target="84" cx="75" cy="75" />
		</svg>
    <span class="center percentage"><span class="value">0</span><span class="percentSymbol">%</span></span>
  </div>

</div>

<div class="container">

  <div class="gauge-container">
    <svg class="gauge" viewBox="0 0 150 150" preserveAscpectRatio="xMinYMin Meet">
			<circle class="rail" r="67" cx="75" cy="75" />
			<circle class="progress" r="67" data-target="88" cx="75" cy="75" />
		</svg>
    <span class="center icon"><i class="fa fa-heart"></i></span>
  </div>

</div>

<div class="container">

  <div class="gauge-container">
    <svg class="gauge" viewBox="0 0 150 150" preserveAscpectRatio="xMinYMin Meet">
			<circle class="rail" r="67" cx="75" cy="75" />
			<circle class="progress" r="67" data-target="50" cx="75" cy="75" />
		</svg>
    <span class="center icon"><i class="fa fa-trophy"></i></span>
  </div>

</div>

<div class="container">

  <div class="gauge-container">
    <svg class="gauge" viewBox="0 0 150 150" preserveAscpectRatio="xMinYMin Meet">
			<circle class="rail" r="67" cx="75" cy="75" />
			<circle class="progress" r="67" data-target="75" cx="75" cy="75" />
		</svg>
    <span class="center icon"><i class="fa fa-diamond"></i></span>
  </div>

</div>

/* Here's where I got these color combos
https://designschool.canva.com/blog/100-color-combinations/
*/

//palette 1
$papaya: #fe7a47;
$granola: #f5ca99;
$strawberry: #d8412f;

//palette 2
$peach: #ffccac;
$raspberry: #ed5752;
$strawberries: #cb0000;


//palette 3
$golden: #efb509;
$lemondrop: #ffec5c;
$ivory: #f1f3ce;

//palette 4
$turquoise: #31a2ac;
$periwinkie: #d0e1f9;
$aquamarine: #98dbc6;





*, *::before, *::after{

	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;

}

html{

	height: 100%;
	width: 100%;

}

body{

	font-family: 'Open Sans', sans-serif;
	height: 100%;
	width: 100%;
	position: relative;
	display: table;
	margin: 0;

}

.container{

	height: 50%;
	width: 25%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;

	.title{

		text-align: center; 
		padding: 0 0 30px; 
		margin: 0;

	}

	&:first-of-type{

		background-color: $papaya;

		.rail{ stroke: $granola; }

		.progress{ stroke: $strawberry; }

		.percentage{ color: $granola; }

	}

	&:nth-of-type(2){

		background-color: $raspberry;

		.rail{ stroke: $peach; }

		.progress{ stroke: $strawberries; }

		.icon{ color: $strawberries; }

	}

	&:nth-of-type(3){

		background-color: $ivory;

		.rail{ stroke: $lemondrop; }

		.progress{ stroke: $golden; }

		.icon{ color: $golden; }

	}

	&:nth-of-type(4){

		background-color: $aquamarine;

		.rail{ stroke: $periwinkie; }

		.progress{ stroke: $turquoise; }

		.icon{ color: $turquoise; }

	}

}

.gauge-container{

	display: inline-block;
	position: relative;
	width: 70%;

	.gauge{

		position: relative;
		display: block;
    
    circle{ stroke-width: 15; }

		.rail{ fill: transparent; }

		.progress{

			fill: transparent;
			stroke-linecap: round;

		}

	}

	.center{

		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: 300;
    
    &.percentage{ font-size: 2vw; }
    
    &.icon{ font-size: 3vw; }

		.percentSymbol{ font-size: .8em; }
		
		.value{ font-size: 1.8em; }

	}


}