#loader {
        display: inherit;
        position: relative;
        width: 50px;
        height: 50px;
        transform: rotate(165deg);
        --loader-clr-1: rgba(108, 95, 246, 0.886);
        --loader-clr-2: #9f97f0;
      }
      #loader span {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        transform: translate(-50%, -50%);
      }
      #loader span:nth-child(1) {
        animation: 2s ease 0s infinite normal none running loader-anim-1;
      }
      #loader span:nth-child(2) {
        animation: 2s ease 0s infinite normal none running loader-anim-2;
      }
      @keyframes loader-anim-1 {
        0% {
          width: 10px;
          box-shadow:
            var(--loader-clr-1) 20px -10px,
            var(--loader-clr-1) -20px 10px;
        }
        35% {
          width: 50px;
          box-shadow:
            var(--loader-clr-1) 0 -10px,
            var(--loader-clr-1) 0 10px;
        }
        70% {
          width: 10px;
          box-shadow:
            var(--loader-clr-1) -20px -10px,
            var(--loader-clr-1) 20px 10px;
        }
        to {
          box-shadow:
            var(--loader-clr-1) 20px -10px,
            var(--loader-clr-1) -20px 10px;
        }
      }
      @keyframes loader-anim-2 {
        0% {
          height: 10px;
          box-shadow:
            var(--loader-clr-2) 10px 20px,
            var(--loader-clr-2) -10px -20px;
        }
        35% {
          height: 50px;
          box-shadow:
            var(--loader-clr-2) 10px 0,
            var(--loader-clr-2) -10px 0;
        }
        70% {
          height: 10px;
          box-shadow:
            var(--loader-clr-2) 10px -20px,
            var(--loader-clr-2) -10px 20px;
        }
        to {
          box-shadow:
            var(--loader-clr-2) 10px 20px,
            var(--loader-clr-1) -10px -20px;
        }
      }