How to make the middle part of this loader transparent

https://codepen.io/stressunfit/pen/MWLgQee Hi, i made a loader but i am facing issue to make the middle part transparent. if i set .inner-circle class same color as background color it looks fine. but i want it to be transparent so that i can show this loader on picture's.
2 Replies
MarkBoots
MarkBoots•13mo ago
you can use a mask-image radial-gradient with this, you don't even need the inner div anymore
.loader {
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
-webkit-mask-image: radial-gradient(100% 100%, transparent 37.5%, black 0);
mask-image: radial-gradient(100% 100%, transparent 37.5%, black 0);
}
.loader {
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
-webkit-mask-image: radial-gradient(100% 100%, transparent 37.5%, black 0);
mask-image: radial-gradient(100% 100%, transparent 37.5%, black 0);
}
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@MarkBoots Thanks!! works perfectly.
Want results from more Discord servers?
Add your server