@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.preloader {
  position: absolute;
  height: 99.9vh;
  width: 99.9vw;
  overflow: hidden;
  background-color: var(--theme-webpage-bg_color);
  color: var(--theme-webpage-text_color);
}

.disappear {
  animation-name: fadeout;
  animation-duration: 1s;
}

.appear {
  animation-name: fadein;
  animation-duration: 1s;
}

.preloader .spinner-border {
  width: 80px;
  height: 80px;
  margin: auto;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  display: inline-block;
  vertical-align: text-bottom;
  border: 8px solid var(--theme-webpage-loading_animation_color);;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}