#pre-loader {
  display: grid;
  place-items: center;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  box-shadow: none;
  position: fixed;
  overflow: hidden !important;
  background-color: #ffffff;
  counter-increment: num;
  z-index: 1000;
}

#pre-loader .loading {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #0000;
  border-right-color: #86be1bc4;
  position: relative;
  animation: l24 1s infinite linear;
}

.loading:before,
.loading:after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: inherit;
  animation: inherit;
  animation-duration: 2s;
}

.loading:after {
  animation-duration: 4s;
}

@keyframes l24 {
  100% {transform: rotate(1turn)}
}