How to create a CSS loader with gradient border and transparency?

Question

I'm trying to do a loader with HTML and CSS I have the loader done but there's an issue when I have information behind the center of the loader the information doesn't show and the reason is because I have background: white; that I need to avoid showing the gradient because if I remove the white color and put transparent the gradient appears.

So I need to fix the problem when I have something behind the loader

 .loader { display: flex; justify-content: center; position: fixed; top: 50%; left: 50%; z-index: 10; } .loader .circle { background-image:linear-gradient(90deg, #a03297, #e90b5a); width: 80px; height: 80px; border-style: solid; border-color: transparent; border-radius: 50%; border-width: 1px; animation: rot 2s linear infinite; padding: 10px; box-sizing: content-box; } .circle > div { background:white; height: 100%; width: 100%; border-style: solid; border-color:transparent; border-radius: 50%; border-width: 1px; } @keyframes rot { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg); } }

 <div class="loader"> <div class="circle"> <div></div> </div> </div> <p style="text-align: center; margin-top: 140px;">aaaaaaasssssssssssssssssçççççççççççççççççççççççççççççççççççççççççssssssss</p>

Answer 1

Use mask to make the inner part transparent:

 .loader { background:linear-gradient(yellow, #e90b5a); /* Show only 10px from the border */ -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0); mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff 0); width: 100px; height: 100px; border-radius: 50%; position: fixed; top: calc(50% - 50px); left: calc(50% - 50px); animation: rot 2s linear infinite; } @keyframes rot { 100% { transform: rotate(360deg); } } body { background:linear-gradient(to right,grey,white) }

 <div class="loader"></div>