JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="container">
  <div class="wrapper first">
    <div class="pie spinner"></div>
    <div class="pie filler"></div>
    <div class="mask"></div>
  </div>
</div>

CSS

.container {
  position: relative;
}
.wrapper,
.wrapper * {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  margin: 40px auto;
  background: #fff;
  overflow: hidden;
  width: 250px;
  height: 250px;
}

.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #fff;
  border: 10px solid navajowhite;
}

.wrapper .spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  border-right: none;
}

.wrapper .filler {
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  right: 50%;
  opacity: 0;
  z-index: 100;
  border-left: none;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  right: 0;
}

.wrapper.first .spinner {
  transform: rotate(calc(180deg - 15deg));
}