
.dot-windmill {
  position: relative;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #262937;
  color: #262937;
  transform-origin: 5px 15px;
  animation: dotWindmill 2s infinite linear;
}

.dot-windmill::before, .dot-windmill::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.dot-windmill::before {
  left: -8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #262937;
  color: #262937;
}

.dot-windmill::after {
  left: 8.66px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #262937;
  color: #262937;
}

@keyframes dotWindmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}


/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
 .dot-bricks {
    position: relative;
    top: 8px;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #262937;
    color: #262937;
    box-shadow: 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937, 10007px 0 0 0 #262937;
    animation: dotBricks 2s infinite ease;
  }
  
  @keyframes dotBricks {
    0% {
      box-shadow: 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937, 10007px 0 0 0 #262937;
    }
    8.333% {
      box-shadow: 10007px -16px 0 0 #262937, 9991px 0 0 0 #262937, 10007px 0 0 0 #262937;
    }
    16.667% {
      box-shadow: 10007px -16px 0 0 #262937, 9991px -16px 0 0 #262937, 10007px 0 0 0 #262937;
    }
    25% {
      box-shadow: 10007px -16px 0 0 #262937, 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937;
    }
    33.333% {
      box-shadow: 10007px 0 0 0 #262937, 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937;
    }
    41.667% {
      box-shadow: 10007px 0 0 0 #262937, 10007px -16px 0 0 #262937, 9991px 0 0 0 #262937;
    }
    50% {
      box-shadow: 10007px 0 0 0 #262937, 10007px -16px 0 0 #262937, 9991px -16px 0 0 #262937;
    }
    58.333% {
      box-shadow: 9991px 0 0 0 #262937, 10007px -16px 0 0 #262937, 9991px -16px 0 0 #262937;
    }
    66.666% {
      box-shadow: 9991px 0 0 0 #262937, 10007px 0 0 0 #262937, 9991px -16px 0 0 #262937;
    }
    75% {
      box-shadow: 9991px 0 0 0 #262937, 10007px 0 0 0 #262937, 10007px -16px 0 0 #262937;
    }
    83.333% {
      box-shadow: 9991px -16px 0 0 #262937, 10007px 0 0 0 #262937, 10007px -16px 0 0 #262937;
    }
    91.667% {
      box-shadow: 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937, 10007px -16px 0 0 #262937;
    }
    100% {
      box-shadow: 9991px -16px 0 0 #262937, 9991px 0 0 0 #262937, 10007px 0 0 0 #262937;
    }
  }

  .loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      top: 0;
      position: fixed;
      background-color: #fff;
      z-index: 1000000000000;
  }
