Spinner with transparent background?

Antonio Published at Dev

Antonio

I have a spinner with a white background which is animated through a keyframe. So, having this code pen, how could I remove this color to "smt-spinner-inner-circle" class without affecting the original desing? If the background is removed, the portion is visible. I have tried to apply a clip but the result is not the expected.

http://codepen.io/anon/pen/WpagJN

Html:

<div class="smt-spinner-circle">
   <div class="smt-spinner"></div>
   <div class="smt-spinner-inner-circle"></div>
</div>

To sum up, I need the background of the spinner transparent, not red, since the website will be different backgrounds depending on the page you are (grey, white, etc)...

Ason

Why not do like this, which will be transparent on top of any backgrounds, images included

.test {
  display: inline-block;
  padding: 20px;
}
.test.red{
  background: red;
}
.test.green{
  background: green;
}
.test.image{
  background: url(http://lorempixel.com/500/200/nature/1/);
}

.smt-spinner-circle {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 20px;
  border-radius: 50%;
}
.smt-spinner {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border-right: 2px solid rgba(255,255,255,0.6);
  border-top: 2px solid blue;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
  animation: rotate--spinner 1.6s infinite;
}

@keyframes rotate--spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="test red">
  <div class="smt-spinner-circle">
   <div class="smt-spinner"></div>
  </div>
</div>
<div class="test green">
  <div class="smt-spinner-circle">
   <div class="smt-spinner"></div>
  </div>
</div>
<div class="test image">
  <div class="smt-spinner-circle">
   <div class="smt-spinner"></div>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.