.loading_overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1200;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loading_message {
  color: white;
}

.spinner {
  width: 3rem;
  height: 3rem;
  overflow: visible;
}

.spinner > path {
  --animation-duration: 1s;
  --origin: 50%;
  fill: rgba(255, 255, 255, 1);
  animation: petal_animation var(--animation-duration) linear infinite;
}

.spinner > path.petal1 {
  transform-origin: var(--origin) var(--origin);
  animation-delay: calc(var(--animation-duration) * 0 / 8);
}

.spinner > path.petal2 {
  transform-origin: var(--origin) var(--origin);
  animation-delay: calc(var(--animation-duration) * -7 / 8);
}

.spinner > path.petal3 {
  transform-origin: var(--origin) calc(100% - var(--origin));
  animation-delay: calc(var(--animation-duration) * -6 / 8);
}

.spinner > path.petal4 {
  transform-origin: var(--origin) calc(100% - var(--origin));
  animation-delay: calc(var(--animation-duration) * -5 / 8);
}

.spinner > path.petal5 {
  transform-origin: calc(100% - var(--origin)) calc(100% - var(--origin));;
  animation-delay: calc(var(--animation-duration) * -4 / 8);
}

.spinner > path.petal6 {
  transform-origin: calc(100% - var(--origin)) calc(100% - var(--origin));
  animation-delay: calc(var(--animation-duration) * -3 / 8);
}

.spinner > path.petal7 {
  transform-origin: calc(100% - var(--origin)) var(--origin);
  animation-delay: calc(var(--animation-duration) * -2 / 8);

}

.spinner > path.petal8 {
  transform-origin: calc(100% - var(--origin)) var(--origin);
  animation-delay: calc(var(--animation-duration) * -1 / 8);
}

@keyframes petal_animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  5% {
    transform: scale(1.3);
  }
  20% {
    transform: scale(1.05);
  }
  37.5% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}