circle loading

 <div class="out">
      <div class="inner"></div>
    </div>
<style>
      .out{
        background-image: conic-gradient(from 1.5708rad at 50% 50%, #FFFFFF 0%, #333333 100%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation:fadenum 1.2s infinite;
        animation-timing-function:linear;
      }
      @keyframes fadenum{
        0%{transform:rotate(0deg);}
         100%{transform:rotate(360deg);}
      }
      .inner{
        position: absolute;
        width:44px;
        height: 44px;
        left:2px;
        top:2px;
        border-radius: 50%;
        background: #fff;
      }
    </style>

Effect: