.wrapper{
    width:200px;
    height:200px;
    border:1px solid red;
    position:relative;
  }
  
  .loading::before,.loading::after{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:black;
    border-radius:50%;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    animation: s 1s linear infinite;
  }
  
  .loading::after{
    animation-delay: 0.5s;
  }
  
  @keyframes s{
    0%{
      width:0px;height:0px;opacity:1;
    }
    100%{
      width:100px;height:100px;opacity:0;
    }
    
  }