#loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  z-index: 1000;
}

#loading-indicator-text {
  padding-top: 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
}

svg {
  --s: 48px;
  width: var(--s);
  height: var(--s);
}

circle {
  --r: 47px;
  --1deg: calc(2 * pi * var(--r) / 360);
  stroke-width: calc((50% - var(--r)) * 2.5);
  animation: dash-anim 1400ms ease-in-out infinite,
    full-rotation-anim 2000ms linear infinite;
  transform-origin: 50% 50%;
}

@keyframes dash-anim {
  0% {
    stroke-dasharray: 0 0 calc(2 * var(--1deg)) calc(358 * var(--1deg));
  }

  50% {
    stroke-dasharray: 0 calc(35 * var(--1deg)) calc(290 * var(--1deg)) calc(35 * var(--1deg));
  }

  100% {
    stroke-dasharray: 0 calc(358 * var(--1deg)) calc(2 * var(--1deg));
  }
}

@keyframes full-rotation-anim {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}