Seeking assistance to modify my spinner design. I want one end to be thicker and the other end to be thin. My attempts so far have been unsuccessful.
<div id="data-loader">
<div class="loader">
<div class="blue"></div>
</div>
</div>
#data-loader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#ffffff;
}
.loader {
left: 50%;
top: 50%;
position: fixed;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius:50%;
}
.loader .blue {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
border-top:4px solid #7199C1;
border-right:3px solid #7199C1;
border-bottom:1px solid #7199C1;
border-radius:50%;
-webkit-animation: spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation: spin 1s linear infinite;
-webkit-animation-name: spinner;
-moz-animation-name: spinner;
}
@-webkit-keyframes spinner
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinner
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
I applied borders on the top, right, and bottom of a div with a border-radius of 50%.