JSFiddle - React, Tailwind, and code Playground

by dsupreme

HTML

<div class="ring-base">
  <div class="ring-right" style={{}}></div>
  <div class="ring-left" style={{}}></div>
  <div class="ring-cover">
    <div class="ring-text">10%</div>
  </div>
</div>

CSS

.ring-base {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;
    transform: rotate(90deg);
    overflow:hidden;
}
.ring-cover {
    position: absolute;
    height: 180px;
    width: 180px;
    background: #fff;
    border-radius: 50%;
    top: 5%;
    left: 5%;
}

.ring-cover .ring-text {
    position: absolute;
    
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2em;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
    transform: rotate(-90deg);
}

.ring-right, .ring-left {
    height: 100px;
    width: 200px;
    overflow: hidden;
    position: absolute;  
}

.ring-right:before, .ring-left:before {
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    border-radius: 100px 100px 0 0;
    background-color: grey;
    transform: rotate(0deg);
}

.ring-right {
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    transform: rotateZ(0deg);
}

.ring-left {
    transform: rotate(180deg);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.ring-right:before {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    transform: rotate(0deg);
}

.ring-left:before {
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

}