For my project, I am trying to showcase multiple circular shapes with percentages in a row, but I am encountering some issues.
I attempted using a div with display flex, but it doesn't seem to be working as expected. Here is what I have tried so far:
.meal-circular-progress{
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 0deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
margin:auto;
//transition: background 2s;
//transition-timing-function: ease;
//border: 1px solid red;
}
.meal-circular-progress::before{
content: "";
position: absolute;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #fff;
//border: 1px solid red;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}<div class="col-sm-6 center">
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
<div class="meal-circular-progress" ng-style="c.circular">
<span class="progress-value">10%</span>
</div>
</div>