.loader {

  .animation-pulse {
    animation: pulse 2s ease-in-out infinite;
  }

  .animation-shake {
    animation: shake 0.3s ease-in-out;
  }

  .icon {
    width: 150px;
    height: 150px;
  }

  height: 100vh;
  width: 100vw;

  &.middle, .middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .progress {
    width: 50%;
  }

  @keyframes pulse {
    0% {
      transform: scale(1, 1);
      filter: drop-shadow(0 0 0px black);
    }
    10% {
      transform: scale(1.5, 1.5);
      filter: drop-shadow(0 0 100px white);
    }
    100% {
      transform: scale(1, 1);
      filter: drop-shadow(0 0 0px black);
    }
  }

  @keyframes shake {
    0% {
      transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
      transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
      transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
      transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
      transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
      transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
      transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
      transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
      transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
      transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
      transform: translate(1px, -2px) rotate(-1deg);
    }
  }
}