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

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

.spinner {
  height: 8vh;
  width: 8vh;
  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);
  }
}

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

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

.spinner {
  height: 8vh;
  min-height: 5rem;
  width: 8vh;
  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);
  }
}

Add min-height and min-width to prevent super small spinner when opening console
Add min-height and min-width to prevent super small spinner when opening console
