Coloring CSS half-circle

Question

I made a half-circle, and I want to color it according to the percentage I need. The position of the text doesn't matter for now. What I want is to have 50% of the border colored. Later I will need 70% and 80%. How do I do that?

.info__radius__outline {
  width: 20%;
  height: 6em;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid gray;
  border-bottom: 0;
  display: inline-block;
}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>

Answer 1

You may use a pseudo and rotate it, set rotation via class or js to stick to the value written.

Demo below uses animation to show effect

.info__radius__outline {overflow:hidden;}
.info__radius,
.info__radius:before {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  border-bottom: 0;
  display: inline-block;
  text-align:center;
}

.info__radius:before {
  content: '';
  position: absolute;
  bottom: 0px;
  width:auto;
  left:-10px;
  right:-10px;
  transform-origin: bottom center;
  transform: rotate(-180deg);
  border-color: gray;
  /* demo */
  animation: rot 5s infinite linear alternate;
}
@keyframes rot {
  80%, to {
    transform: rotate(0deg);
  }
}
.info__radius.p70:before {
  transform: rotate(-54deg);/* remove 30% : do  (180deg / 10) * 3  .*/
  animation:none;
}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div><div class="info__radius__outline">
  <div class="info__radius p70">
    <p class="info__radius__text">70</p>
  </div>
</div>

a few similar examples

---

---

About the gradient idea where you would need 2 gradients and background-clip to draw them on 2 differents parts:

• 1 gradient will be drawn on the center away from the transparent borders

• the other with the half colored (alike the pseudo) also drawn under the borders area.

• Gradient can be rotated every 18deg for each 10% .

.info__radius {
  position: relative;
  width: 20%;
  height: 10vw;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 10px solid rgba(0,0,0,0); 
  box-sizing:border-box;
  border-bottom: 0;
  display: inline-block;
  text-align:center;
  background:   
    linear-gradient(rgba(209, 109, 91,0.7) ,rgba(0,0,0,0.5)) no-repeat center  ,/* can be (white,white) to hide portion of the next gradient*/
    linear-gradient(-54deg, transparent 50%, turquoise 50%) -10px -10px 
   ;
  color:white;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;
   
  /*demo */
  box-shadow:0 0 0 2px gray, inset 0 0  2px 1px black;
}

.info__radius.p25 {
 line-height:8vw;
  background:   
    linear-gradient(rgba(255,255,255,0.7) ,rgba(255,255,255,0.7)) no-repeat center  ,
    linear-gradient(-135deg, transparent 49%,black 50%, turquoise 50%) -10px -10px 
   ;
  color:tomato;
  font-weight:bold;
  background-size: auto auto, calc(100% + 20px) calc(200% + 40px);
  background-clip: content-box,border-box;

}

.info__radius {float:left;margin:1em;}

<div class="info__radius__outline">
  <div class="info__radius">
    <p class="info__radius__text">70</p>
  </div>
</div>

<div class="info__radius__outline">
  <div class="info__radius p25">
    <p class="info__radius__text">25%</p>
  </div>
</div>