Issue
I have half circle
.progress-semi-circle{
position: relative;
display:inline-block;
padding: 20px;
text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
position: relative;
width: 180px; height: 90px; /* Half circle (overflow) */
margin-bottom: -14px; /* bring the numbers up */
overflow: hidden;
}
.bar-semi-circle{
position: absolute;
top: 0; left: 0;
width: 180px; height: 180px; /* full circle! */
border-radius: 50%;
box-sizing: border-box;
border: 25px solid #262925; /* half gray, */
border-bottom-color: #0bf; /* half azure */
border-right-color: #0bf;
}
<div class="progress-semi-circle">
<div class="barOverflow">
<div class="bar-semi-circle"></div>
</div>
<span>64</span>%
</div>
Now I need the border color is using gradient color.
border: 25px solid #262925;
Is there any possible to set the border using gradient color?
Solution
You can do it like below:
.progress-semi-circle {
--b: 20px; /* border size */
--a: 64; /* percentage*/
position: relative;
width: 180px;
aspect-ratio: 2;
display: inline-grid;
grid-auto-flow: column;
border-radius: 999px 999px 0 0;
overflow: hidden;
place-content: end center;
background: radial-gradient(farthest-side at bottom, #0000 calc(99% - var(--b)), #262925 calc(100% - var(--b)));
}
.progress-semi-circle:before {
content: "";
position: absolute;
inset: 0;
-webkit-mask:
conic-gradient(from calc(var(--a)*1.8deg - 90deg) at bottom ,#000 50%, #0000 0),
radial-gradient(farthest-side at bottom, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
background: linear-gradient(red,blue); /* your gradient */
}
<div class="progress-semi-circle">
<span>64</span>%
</div>
<div class="progress-semi-circle" style="--a:50">
<span>50</span>%
</div>
<div class="progress-semi-circle" style="--a:20">
<span>20</span>%
</div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.