.loader-wrapper {
  height: 180px;
  width: 180px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;

  .loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d7d7d7;
    background: linear-gradient(
      to right,
      #d7d7d7 10%,
      rgba(235, 235, 235, 0) 42%
    );
    position: relative;
    animation: load3 1.4s infinite linear;
    transform: translateZ(0);
    mask-image: radial-gradient(
      circle,
      rgba(0, 0, 0, 0) 28px,
      rgb(0, 0, 0) 28px
    );

    &:before {
      width: 50%;
      height: 50%;
      background: #d7d7d7;
      border-radius: 100% 0 0 0;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
    }

    &.gray {
      &:after {
        background: tint(#e4e7ec, 60%);
      }
    }
  }

  @-webkit-keyframes load3 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes load3 {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

.loading-main-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  flex-direction: column;

  .loading-logo {
    max-width: 200px;
    margin: 0 auto;

    img {
      width: 100%;
      max-width: 100%;
    }
  }
}