I want to create this with HTML and CSS. It should be exact same as in photo. Could you please help? Thanks in advance.
Asked
Active
Viewed 60 times
-1
-
https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda – TobyLoby Mar 11 '22 at 12:14
1 Answers
0
.code-copy {
position: relative;
display: flex;
height: 200px;
width: 200px;
}
.code-copy span {
display: flex;
font-size: 31px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
align-items: center;
justify-content: center;
}
<div class="code-copy">
<svg xmlns="http://www.w3.org/2000/svg" id="sv" width="200" height="200" viewBox="0 0 200 200">
<path id="0" fill="#D1E6BC" d="M100, 0 A100,100 0 0 1 163.357335318736,177.36826262305007 L131.678667659368,138.68413131152505 A50,50 0 0 0 100,50 Z"></path>
<path id="1" fill="#94CD8B" d="M163.357335318736, 177.36826262305007 A100,100 0 1 1 99.98254670756873,0.0000015230870928917284 L99.99127335378436,50.000000761543546 A50,50 0 1 0 131.678667659368,138.68413131152505 Z"></path>
</svg>
<span>75%</span>
</div>

prograk
- 559
- 4
- 14