JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-3">
  <div class="pie">100</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
  <div class="pie">50</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
  <div class="pie">40</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
  <div class="pie">10</div>
</div>

CSS

.pie {
  position:relative;
  width: 100%;
  height: 100%;
}
svg {   
  transform: rotate(-90deg);
}
@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
  0% { opacity: .2; }
  100% { opacity: 1; }
}
.donut-ring {
  stroke: #f3f3f3;
}

.donut-segment-2 {
  stroke: #56c0c6;
  animation: donut1 3s;
}
@keyframes donut1 {
  from { stroke-dasharray: 0 100; }
}
.text {
  position:absolute;
  top: 42%;
  left: 42%;
}

JavaScript

$('.pie').each(function(index, element) {
  var num = +($(this).text());
  var chart = '<svg width="100%" height="100%" viewBox="0 0 40 40" class="donut"><circle class="donut-ring" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5"></circle><circle class="donut-segment-2" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5" stroke-dasharray=""></circle></svg>';
  $(this).html(chart);
  $(this).find('.donut-segment-2').css('stroke-dasharray', num + ' 100');
  $(this).append('<div class="text">' + num + '%</div>');
});