Loading circling effect during loading

design sketch ：

 html Code ：

  <div class="border"></div>

css Code ：

<style>
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .border {
      width: 50px;
      height: 50px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid pink;
      border-radius: 50%;
      animation: loading .7s infinite linear;
    }
  </style>