JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  <div class="donut">
    <div class="thickness"></div>
    <div class="progress">
      <div class="section right"></div>
      <div class="section left"></div>
    </div>
  </div>
</div>

SCSS

body { background-color: #eee; }

.container {
  margin: 50px auto;
  background-color: #fafafa;
  height: 300px; width: 300px;
}

$size: 200px;
$thickness: 80%;
$size_half: $size / 2;
$container_bg: #fafafa;
$bg: #eee;

.donut {
  position: relative;
  height: $size; width: $size;
  background-color: $bg;
  top: $size / 4; left: $size / 4;
  border-radius: 50%;
  overflow: hidden;
}

.progress {
  height: 100%; width: 100%;
  background-color: transparent;
  border-radius: 50%;
  z-index: 1;
}
.progress .section {
  position: absolute;
  height: 100%; width: 50%;
  /* overflow: hidden; */
  background-color: $bg;
  opacity: .5;
  transform-origin: 0% 50%;
}
.progress .section:after {
  position: absolute;
  content: '';
  height: 100%; width: 100%;
  transform-origin: 100% 50%;
  background-color: pink;
}
.section.right {
  $offset: -180deg;
  $deg: 180deg;
  left: 50%;
  &:after { left: 0%; transform-origin: 0% 50%; }
  &:after { transform: rotate($offset + $deg); }
}
.section.left {
  $offset: 180deg;
  $deg: -10deg;
  background-color: orange;
  left: 0%;
  &:after { left: 100%; transform-origin: 0% 50%; background-color: cornflowerblue; }
  &:after { transform: rotate($offset + $deg); }
}

.donut > .thickness  {
  opacity: .5;
  position: absolute;
  height: $thickness; width: $thickness;
  background-color: #fafafa;
  border-radius: 50%;
  top: calc(50% - #{$thickness / 2});
  left: calc(50% - #{$thickness / 2});
  z-index: 2;
}