Spinner with transparent background? - html

Question

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)...

Answer 1

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>

Answer 2

Your background-color hides triangle that rotates, so simply change background: white to match your background color.
body{
background: red;
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: blue;
border-radius: 50%;
}
.smt-spinner-inner-circle {
width: 92%;
height: 92%;
background: red;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.smt-spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 25px solid rgba(255,255,255,0.6);
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>

Answer 3

You could create a simple spinner with only one element and different border styles.
.loader{
border: 2px solid #CECECE;
border-top-color: #14B48C;
width: 40px;
height: 40px;
border-radius: 50%;
animation: spin 1s infinite;
}
#keyframes spin{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

Answer 4

CSS Code
#keyframes ldio-rpinwye8j0b {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.ldio-rpinwye8j0b div {
position: absolute;
animation: ldio-rpinwye8j0b 1s linear infinite;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 50%;
box-shadow: 0 4px 0 0 #e15b64;
transform-origin: 80px 82px;
}
.loadingio-eclipse {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-rpinwye8j0b {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-rpinwye8j0b div { box-sizing: content-box; }
<div
class="loadingio-eclipse">
<div class="ldio-rpinwye8j0b">
<div>
</div>
</div>
</div>