- How can I add the gray dial beneath like within the image under?
- I’ve created a dial that reveals 100%. I used to be questioning if I can write a perform to dynamically render the %(could also be by utilizing a math.random perform)?
.ring {
place: relative;
width: 50vmin;
top: 50vmin;
background-image: radial-gradient(#C816CDFF 0, #C816CDFF 50%, clear 50%, clear 100%),
radial-gradient(#C816CDFF 0, #C816CDFF 50%, clear 50%, clear 100%),
radial-gradient(white 0, white 66%, clear 66%),
conic-gradient(#C816CDFF 0, #c816cd 150deg, white 60deg, white 200deg, #C816CDFF 210deg, #C816CDFF 360deg);
background-size: 5.0% 5.0%, 5.0% 5.0%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: 27.2% 95.6%, 75.5% 94.2%, middle middle, middle middle;
border-radius: 50%;
border-style: none;
}
.pace {
show: inline-block;
place: absolute;
high: 50%;
left: 50%;
rework: translateX(-50%) translateY(-50%);
text-align: middle;
coloration: grey;
}
.pace .quantity {
font-size: 10px;
font-weight: daring;
coloration: black;
}
.pace .models {
font-size: 25px;
coloration: black;
}<div className="App">
<div class="ring">
<div class="pace">
<div class="quantity">Lorem ipsum dolor</div>
<div class="models" >100%</div>
</div>
</div>
</div>
