phenomic/themes/phenomic-theme-base/src/components/Loading/index.css

Modern website generator based on the React and Webpack ecosystem.

.loader {
  display: flex;
  height: 25vh;
  justify-content: center;
  align-items: center;
}

:root {
  --spinner-Color: #000;
  --spinner-Color-front: color(var(--spinner-Color) a(0.8));
  --spinner-Color-back: color(var(--spinner-Color) a(0.2));
}

.spinner {
  height: 5vh;
  min-height: 5rem;
  width: 5vh;
  min-width: 5rem;
  border: 6px solid var(--spinner-Color-back);
  border-top-color: var(--spinner-Color-front);
  border-radius: 100%;
  animation: rotation 0.6s infinite linear 0.25s;

  /* the opacity is used to lazyload the spinner, see animation delay */
  opacity: 0;
}

@keyframes rotation {
  from {
    opacity: 1;
    transform: rotate(0);
  }

  to {
    opacity: 1;
    transform: rotate(359deg);
  }
}