JSFiddle - React, Tailwind, and code Playground

by index

HTML

<div class="block">
      <p>Pies with timer</p>
      <div id="full-pie" class="pietimer"></div>
      <div id="new-timer" class="pietimer"></div>
      <div id="other-timer" class="pietimer"></div>
      <div id="no-closer-timer" class="pietimer"></div>
      <div id="delay-timer" class="pietimer"></div>
    </div>

    <div class="block">
      <p>Direct drawn or initialized for display</p>
      <div id="another-timer" class="pietimer"></div>
      <div id="another-one-timer" class="pietimer"></div>
      <div id="one-more" class="pietimer"></div>
    </div>

CSS

.pietimer {
  position: relative;
  font-size: 200px;
  width: 1em;
  height: 1em;
  float: left;
}
.pietimer > .percent {
  position: absolute;
  top: 1.05em;
  left: 0;
  width: 3.33em;
  font-size: 0.3em;
  text-align: center;
}
.pietimer > .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0px 1em 1em 0.5em);
}
.pietimer > .slice.gt50 {
  clip: rect(auto auto auto auto);
}
.pietimer > .slice > .pie {
  border: 0.1em solid #72B359;
  position: absolute;
  width: 0.8em; /* 1 - (2 * border width) */
  height: 0.8em; /* 1 - (2 * border width) */
  clip: rect(0em 0.5em 1em 0em);
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em; 
  border-radius: 0.5em;
}
.pietimer > .slice > .pie.fill {
  -moz-transform: rotate(180deg) !important;
  -webkit-transform: rotate(180deg) !important;
  -o-transform: rotate(180deg) !important;
  -ms-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}
.pietimer.fill > .percent {
  display: none;
}
.pietimer.fill > .slice > .pie {
  border: transparent;
  background-color: #72B359;
  width: 1em;
  height: 1em;
}

.pietimer > .closer {
  border: 0.1em solid #C8E1BE;
  position: absolute;
  width: 0.8em; /* 1 - (2 * border width) */
  height: 0.8em; /* 1 - (2 * border width) */
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;

  -moz-transform: rotate(180deg) !important;
  -webkit-transform: rotate(180deg) !important;
  -o-transform: rotate(180deg) !important;
  -ms-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}
.pietimer > .filler {
  -moz-transform: rotate(360deg) !important;
  -webkit-transform: rotate(360deg) !important;
  -o-transform: rotate(360deg) !important;
  -ms-transform: rotate(360deg);
  transform: rotate(360deg) !important;
}

.pietimer.fill > .closer {
  border: transparent;
  background-color: #C8E1BE;
  width: 1em;
  height: 1em;
}

JavaScript

/*
* Pie Timer
*
* A simple pie display/timer
*
* Credit goes to http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/
* and for initial code from http://blakek.us/css3-pie-graph-timer-with-jquery/
* and I expanded and made into a jQuery plugin
*
* Author: Alec Guintu
* and to those the code originated from.
*
* v1.0
*************************************************************************/
(function($) {

  $.fn.pietimer = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);

    } else {
      $.error('Method ' +  method + ' does not exist on jQuery.tooltip');
    }
  };

  var methods = {
    init: function(settings) {
      var options = {
        percent: 100,
        duration: 5000,
        withPercent: true,
        withCloser: true,
        animate: true,
        block: false
      };

      if (settings) { $.extend(options, settings); }

      return this.each(function() {
        var elem = $(this);

        if (options.animate) {
          elem.pietimer('play', options);
        } else {
          elem.pietimer('draw', options);
        }
      });
    },

    // options [HASH] percent, withPercent, withCloser, block
    draw: function(settings) {
      var options = {
        percent: 100,
        withPercent: true,
        withCloser: true,
        block: false
      };
      if (settings) { $.extend(options, settings); }

      $(this).empty();

      if (options.withPercent) {
        $(this).append('<div class="percent">'+ Math.round(options.percent) +'%</div>');
      }

      if (options.withCloser) {
        $(this).append('<div class="closer"></div>');
      }

      var elem = $('<div class="slice"><div class="pie"></div></div>');

      if (options.percent > 50) {
        elem.addClass('gt50');
        elem.append('<div class="pie fill"></div>');
     ...