SOURCE

<div class="round w300">
  <div class="round w200">
    <div class="round w100">
      <div class="round w1">
        <div class="line roundMove">
        </div>
      </div>
    </div>
  </div>
</div>

  .round {
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 50px auto;
  }
  
  .w300 {
    border-radius: 298px;
    height: 298px;
    margin-top: 0;
    overflow: hidden;
    width: 298px;
  }
  
  .w200 {
    border-radius: 200px;
    height: 200px;
    width: 200px;
  }
  
  .w100 {
    border-radius: 100px;
    height: 100px;
    width: 100px;
  }
  
  .w1 {
    background-color: #fff;
    border-radius: 1px;
    height: 1px;
    position: relative;
    top: -4px;
    width: 1px;
  }
  
  .line {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0 0 150px;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(0deg);
    transform-origin: 0 0 0;
    width: 150px;
  }
  
  .roundMove {
    animation: 3s linear 0s normal both infinite running round;
  }
  
  @keyframes round {
    100% {
      transform: rotate(360deg);
    }
  }