body.preloader_active .three_spinner_container {
  display: flex !important;
  opacity: 1;
}
body.preloader_ready .three_spinner_container {
  display: flex !important;
  opacity: 0 !important;
}

.three_spinner_container {
  transition: opacity 0.5s;
  display: none;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.three_spinner {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 5px;
  border-radius: 50em;
  border: 2px solid transparent;
  pointer-events: none;
  transition: opacity 0.3s;

  z-index: 1005;

  background: conic-gradient(#ffffff00 20%, #fff) border-box;

  -webkit-mask: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #fff)
      )
      padding-box,
    -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));

  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  -webkit-animation: spin 1s infinite cubic-bezier(0.7, 0.4, 0.5, 0.7);
  animation: spin 1s infinite cubic-bezier(0.7, 0.4, 0.5, 0.7);
}

.three_spinner_progress {
  color: white;
  margin-top: 1rem;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: translateZ(0) rotate(360deg);
  }
}