I am currently working on developing a methodology or formula to complete a circle based on a given percentage.
My progress so far can be seen in the following images:
https://i.stack.imgur.com/nr21h.png
I aim for the circle to fill up based on an increase in percentage, similar to the image shown below: https://i.stack.imgur.com/uH0yh.png
https://i.stack.imgur.com/OwA5l.png
I have been struggling to achieve the alignment and calculation as desired. Here is the code snippet I am using:
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: inset 0 0 50px #000;
background: #222;
z-index: 1000;
}
(percent styles continue...)