JSFiddle - React, Tailwind, and code Playground

by James Barner

HTML

<div class="legal-pie">

</div>

CSS

#gavel{
    position: relative;
    left: 130%;
    top:0;
    transform: translate(-50%, -115%);
    width:200%;
}

.st1{fill:#fff;}

.legal-pie-back {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #676867;
  /*color of negative percent gray, full circle*/
  background-image: linear-gradient(to right, transparent 50%, #b46c21 0);
  /*color of covering half, positive percent*/
}
.legal-pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #676867;
  /*color of negative percent gray, full circle*/
  background-image: linear-gradient(to right, transparent 50%, #b46c21 0);
  /*color of covering half, positive percent*/
}

.legal-pie.delighters {
  content: '';
  display: block;
  margin-left: 50%;
  height: 140px;
  width:50%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #b46c21;
  /*covering circle, same color as positive percent*/
  transform-origin: left;
  animation: spin 1.5s linear 0s 1 normal forwards, bg 3s linear 0s 1 normal forwards;
}


@keyframes spin {
  to {
    transform: rotate(130deg)
  }
}

@keyframes bg {
  50% {
    background: #b46c21;
  }
}