:root {
  --base-width: 100px;
  --border-width: 5px;
  --base-duration: 2s;
  --base-delay: 0.12s;
}

* {
  margin: 0;
  padding: 0;
}

body: {
  width: 100%;
  height: 100%;
}

#loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--base-width);
  height: var(--base-width);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: var(--border-width) solid transparent;
}

#loading-container > div {
  position: inherit;
  width: calc(var(--base-width) - ((var(--border-width) * 2) * var(--iteration)));
  height: calc(var(--base-width) - ((var(--border-width) * 2) * var(--iteration)));
  border: inherit;
  border-radius: inherit;
  transform-origin: center;
  border-color: var(--color) transparent transparent var(--color);
  margin: calc(var(--border-width) * var(--iteration));
  animation: var(--base-duration) calc(var(--base-delay) * var(--iteration)) infinite ease anim-loading;
  /*animation: var(--base-duration) calc(var(--base-delay) * var(--iteration)) infinite cubic-bezier(.8, .5, .5, calc(1 + (0.2 * var(--iteration)))) anim-loading;*/
}

@keyframes anim-loading {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}