.pl-loading {
  margin: auto;
  text-align: center;
  .squares {
    @w: 25px;

    position: relative;
    display: inline-block;
    width: @w * 2;
    height: @w * 2;
    overflow: hidden;
    transform-origin: bottom left;
    animation: squareShrink 1.5s ease-in-out infinite;

    & > div {
      position: absolute;
      width: @w;
      height: @w;
      background: #04ca67;

      &:nth-child(1) {
        left: 0;
        top: @w;
      }
      &:nth-child(2) {
        left: @w;
        top: @w;
        animation: drop2 1.5s ease-out infinite;
      }
      &:nth-child(3) {
        left: 0;
        top: 0;
        animation: drop3 1.5s ease-out infinite;
      }
      &:nth-child(4) {
        left: @w;
        top: 0;
        animation: drop4 1.5s ease-out infinite;
      }
    }
  }
}
@keyframes squareShrink {
  0% { transform: scale(1) }
  90% { transform: scale(1) }
  100% { transform: scale(0.5) }
}
@keyframes drop2 {
  0% { transform: translateY(-50px) }
  25% { transform: translate(0) }
  100% { transform: translate(0) }
}
@keyframes drop3 {
  0% { transform: translateY(-50px) }
  50% { transform: translate(0) }
  100% { transform: translate(0) }
}
@keyframes drop4 {
  0% { transform: translateY(-50px) }
  75% { transform: translate(0) }
  100% { transform: translate(0) }
}