.loadingPage {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .text {
    margin-block: 3%;
    font-size: 41px;
  }

  .round {
    width: 150px;
    background: #e1e8eb;
    height: 150px;
    border-radius: 50%;
    position: relative;
        clip-path: border-box;
    -webkit-clip-path: border-box;
    overflow: hidden;
    .loader {
      width: 155px;
      height: 47px;
      background: #0d1124;
      position: absolute;
      left: 50%;
      rotate: 134deg;
      top: 36%;
      transform-origin: left;

      animation: loaderAnimation 2s  linear  infinite ;
    }
   
    .white {
      z-index: 3;
      width: 90%;
      height: 90%;
      background: white;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .dots {
    display: flex;
    flex-direction: row;
    gap: 12px;
    .dot1,
    .dot2,
    .dot3,
    .dot0 {
      height: 10px;
      border-radius: 21px;

      width: 15px;
      background: #e1e8eb;
      transform-origin: right;
    }
    .dot-animation {
      animation: dotAnimation 1s linear forwards;
    }
  }
}

@keyframes dotAnimation {
  0% {
    width: 15px;
    background: #e1e8eb;
  }
  30%,
  100% {
    background: #0d1124;
    width: 56px;
  }
}

@keyframes loaderAnimation{
    0%{

      rotate: 134deg;
    }25%{

      rotate: 224deg;
    }
    50%{

      rotate: 314deg;
    }
    75%{

      rotate: 404deg;
    }
    100%{
      rotate: 494deg;
    }
}