Make this spin loader transparent

Question

First of all, sorry for the very specific question. I'm not that good at CSS yet and I'd need a code help.

I'd like to make the inside circle transparent, without loosing the gradient effect of the border. How can I do it?

I have this spin loader (see the code snippet)

    .spin-loader {
      border-radius: 50%;
      display: inline-block;
      height: 20px;
      width: 20px;
      position: relative;
      animation: spin .675s linear 0s infinite normal;
      background: #5090bd;
      margin-top: 18px;
      margin-left: 205px;
    }
    
    .spin-loader:before {
     content: "";
        display: block;
        position: absolute;
        border-radius: 0 90px 90px 0;
        height: 20px;
        width: 50%;
        top: 0; right: 0;
        z-index: 1;
        background: #405060;  
     background-image: -webkit-gradient(linear, left top, left bottom, from(#5090bd), to(#405060));
     background-image: -webkit-linear-gradient(top, #5090bd, #405060);
     background-image: -moz-linear-gradient(top, #5090bd, #405060);
     background-image: -ms-linear-gradient(top, #5090bd, #405060);
     background-image: -o-linear-gradient(top, #5090bd, #405060);
     background-image: linear-gradient(to bottom, #5090bd, #405060);
     filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5090bd, endColorstr=#405060);
      }
    
    .spin-loader:after {
     content: "";
        display: block;
        position: absolute;
        border-radius: 80%;
        height: 16px;
        width: 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background: #405060;
      }
    
     /* Safari */
    @-webkit-keyframes spin {
     to {
      transform: rotate(360deg);
     } 
    }
    
    @keyframes spin {
     to {
      transform: rotate(360deg);
     }
    }

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Thanks!

add your full code with running link – Saravana Mar 02 '18 at 02:08 — Saravana, Mar 02 '18 at 02:08
I've added a code snippet! – DelphianBoy Mar 02 '18 at 02:36 — DelphianBoy, Mar 02 '18 at 02:36

score 0 · Answer 1 · answered Mar 02 '18 at 02:28

You cannot make this spin loader transparent, because there is some trick to get effect of decreasing opacity of rotating stripe, which cannot be done without full cover this loader with background. You can try and see what will happen when you delete or change background for .spin-loader:after.

Make this spin loader transparent

1 Answers1