Progressive circle

Question

I need to create a little green part for the filling of the circle, as in this image

I've created the external circle with a pseudoelement:

a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid rgb(27, 26, 30);
    z-index: 1;
}

Answer 1

Better solution with SVG:

body {
  display: grid;
  height: 100vh; 
  place-items: center;
  background: #111117;
}

.wrapper {
  display: flex;
}

.progress {
  width: 114px;
  height: 114px;
  margin: 1em;
}

.progress-background {
  fill: none;
  stroke-width: 10px;
  stroke: #232328;
}

.progress-bar {
    fill: none;
    stroke-width: 10px;
    stroke-linecap: butt;
    transform: rotate(-180deg);
    transform-origin: 50% 50%; 
    stroke-dasharray: 360;
    stroke-dashoffset: 350;
    stroke: #246d6e;
    animation: progress-animation 1s ease-out;
}

@keyframes progress-animation {
    from {
        stroke-dashoffset: 360;
    }
    to {
        stroke-dashoffset: 350;
    }
}

<div class="wrapper">
  <svg class="progress">
    <circle class="progress-background" cx="57" cy="57" r="52" />
    <circle class="progress-bar" cx="57" cy="57" r="52" />
  </svg>
</div>

For more examples visit here: enter link description here Source: enter link description here

Answer 2

Maybe this is the solution taking the minimal effort to get as close as possible to the sample image you shared.

It just controls the ring arc size and color through the background property.

It was freely inspired by this:

https://betterprogramming.pub/building-your-own-javascript-circle-progress-bar-ae6299e86bc7

.fontracing {
  font-family: 'Waukegan LDO', sans-serif;
  font-family: 'Waukegan LDO Extended', sans-serif;
  font-family: 'Waukegan LDO Black', sans-serif;
  font-family: 'Waukegan LDO Extended Black', sans-serif;
  letter-spacing: 0.15rem;
}

.container{
  display: flex;
  gap: 20px;
  background: black;  
  padding: 20px;
}

.progress-circle {
  background:        
    /*this controls the quota for ring area compared to the full circle*/
    radial-gradient(black 56%, transparent 46%)
    /*this controls the progress arc color*/
    ,conic-gradient(#232328 0deg 269deg, #1B6D6E 270deg 280deg, #232328 281deg 360deg)  
    ;
  border-radius: 50%;
  width: 240px;
  height: 240px;  
  line-height: 240px;  
  text-align: center;
  
  color: #C3C6D2;
  font-size: 60px;
  font-weight: 600;
}

.progress-circle > span{
  font-size: 30px;
  margin-left: 1px;
}

.progress-description h1 {
  color: white;
}

.progress-description p {
  color: #C3C6D2;
}

<link href="http://fonts.cdnfonts.com/css/waukegan-ldo" rel="stylesheet">

<div class="container fontracing">
  <div class="progress-circle">1<span>%</span></div>
  
  <div class="progress-description">
    <h1>Flexibility</h1>  
    <p>Lorem Ipsum etc etc</p>
  </div>
</div>