JSFiddle - React, Tailwind, and code Playground

by Jason Rose

HTML

<script src="https://github.com/thecreation/jquery-asPieProgress/blob/master/examples/js/jquery.js"></script>
<link rel="stylesheet" href="https://github.com/thecreation/jquery-asPieProgress/blob/master/examples/css/normalize.css">
<script src="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/jquery-asPieProgress.es.js"></script>
<script src="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/jquery-asPieProgress.js"></script>
<script src="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/jquery-asPieProgress.min.js"></script>
<script src="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/jquery-asPieProgress.min.js.map"></script>
<link rel="stylesheet" href="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/css/asPieProgress.css">
<link rel="stylesheet" href="https://github.com/thecreation/jquery-asPieProgress/blob/master/dist/css/asPieProgress.min.css">
<div class="pieProgress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100">
  <div class="progress__meter"><span class="progress__label"></span></div>
</div>
<script>
jQuery(function($) {
  $('.example').asPieProgress({
    namespace: 'pieProgress',
  classes: {
    svg: 'pie_progress__svg',
    element: 'pie_progress',
    number: 'pie_progress__number',
    content: 'pie_progress__content'
  },
  min: 0,
  max: 100,
  goal: 100,
  size: 160,
  speed: 15, // speed of 1/100
  barcolor: '#ef1e25',
  barsize: '4',
  trackcolor: '#f2f2f2',
  fillcolor: 'none',
  easing: 'ease',
  numberCallback(n) {
    'use strict';
    const percentage = Math.round(this.getPercentage(n));
    return `${percentage}%`;
  },
  contentCallback: null
  });
});
</script>

CSS

body {
      padding: 40px;
    }
    .pie_progress {
      width: 160px;
      margin: 10px auto;
    }
    @media all and (max-width: 768px) {
      .pie_progress {
        width: 80%;
        max-width: 300px;
      }
    }