#main {

}
/* HTML: <div class="loader"></div> */
.loader {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
  }
  .loader:before,
  .loader:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: -8px 0 0 -8px;
    width: 16px;
    aspect-ratio: 1;
    background: #7BAD37;
    animation:
      l1-1 2s  infinite,
      l1-2 .5s infinite;
  }
  .loader:after {
    background:#000;
    animation-delay: -1s,0s;
  }
  @keyframes l1-1 {
    0%   {top:0   ;left:0}
    25%  {top:100%;left:0}
    50%  {top:100%;left:100%}
    75%  {top:0   ;left:100%}
    100% {top:0   ;left:0}
  }
  @keyframes l1-2 {
     80%,100% {transform: rotate(0.5turn)}
  }
.loader-body{
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;    
}