Kevin Powell - Community•14mo ago

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.

stressunfit

CodePen

Gradient loading

...

2 Replies

MarkBoots•14mo 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 || 💀OP•14mo ago

@MarkBoots Thanks!! works perfectly.

Gaming

Programming

How to make the middle part of this loader transparent