Create Faded border loading spinner in css, css #onlyCSS By #BKTutorial

Source Code:

<style>

body

{ background:#3F3; }

.abc

{

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

}

.round 

{

  width:100px;

  height:100px;

  background:linear-gradient(to bottom, 

   rgba(255,255,255,1) 0%,rgba(0,0,0,0) 77%,rgba(0,0,0,5) 100%);

  border-radius:50%;

  animation:anim 1.5s infinite linear;

  position:relative;

}

.round:after 

{

  position:absolute;

  display:block;

  top:5px;

  left:5px;

  width:90px;

  height:90px;

  content:"";

  background-color:#3F3;

  border-radius:50%;

  overflow:hidden;

}

@keyframes anim {

  100% { transform:rotate(360deg); }

}

</style>

<div class="abc">

  <div class="round"></div>

</div>

Output: