JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="circle">
  <svg class="circleFill">
    <circle cx="43" cy="43" r="39" stroke="#888888" stroke-width="6" fill="none"></circle>
  </svg>
  <svg class="circleTrack">
    <circle cx="43" cy="43" r="39" stroke="#cccccc" stroke-width="6" fill="none"></circle>
  </svg>
</div>
<div class="fillBtn">Fill</div>
<div class="unfillBtn">Unfill</div>

CSS

html,
body {
  font-family: "Helvetica", helvetica, sans-serif;
}

.circle {
  position: relative;
  width: 85px;
  height: 85px;
  margin: 20px auto;
}

.circle svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.circle svg.circleFill {
  z-index: 1;
  stroke-dasharray: 322;
  stroke-dashoffset: 322;
  -webkit-transition: all 3s;
  transition: all 3s;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.circle svg.circleFill.filled {
  stroke-dashoffset: 38.5;
}

.circle svg.circleTrack {
  z-index: 0;
}

.fillBtn,
.unfillBtn {
  width: 150px;
  padding: 10px 0;
  margin: 20px auto;
  text-align: center;
  background: #cccccc;
  color: #888888;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fillBtn:hover,
.unfillBtn:hover {
  color: #ffffff;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
 var animating = true;
 var interval = 3000;
  $('.fillBtn').click(_.debounce(function() {
    animating = true;
    $('.circleFill').attr('class', 'circleFill filled');
    setTimeout(function() {
    	animating = false;
    }, interval);
  }, 200, true));
  return $('.unfillBtn').click(_.debounce(function() {
    if (animating) {
    	return;
    }
    $('.circleFill').attr('class', 'circleFill');
  }, 200, true));
});