div.box

@mixin center {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
}

body {
  height: 100vh;
  background-image: linear-gradient(to top, #0ba360, #3cba92);
}
.box {
  width: 49px;
  height: 49px;
  @include center;
  
  &::before {
    content: "";
    width: 49px;
    height: 5px;
    background: #000;
    position: absolute;
    top: 58px; left: 0;
    border-radius: 50%;
    opacity: 0.1;
    animation: shadow 0.58s linear infinite;
  }
  &::after {
    content: "";
    background: #fdd245;
    width: 49px;
    height: 49px;
    position: absolute;
    top: 0px; left: 0;
    border-radius: 3px;
    animation: load 0.58s linear infinite;
  }
}

@keyframes shadow {
  0% {transform: scale(1, 1)}
  50% {transform: scale(1.2, 1)}
  100%{transform: scale(1, 1)}
}

@keyframes load {
  17% {border-bottom-right-radius: 3px;}
  25% {transform: translatey(9px) rotate(22.5deg)}
  50% {
    transform: translatey(18px)  scale(1, 0.9) rotate(45deg); 
    border-bottom-right-radius: 39px;
  }
  75% {transform: translatey(9px) rotate(67.5deg)}
  100%{transform: translatey(0px) rotate(90deg)}
}