.loading {
  --loading-color: var(--primary-color);
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--loading-color) 94%, #0000)
    top / 8px 8px no-repeat, conic-gradient(#0000 30%, var(--loading-color));
  mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  opacity: 0;
  /* 0.75秒の非表示期間をもうけることでちらつきを防止 */
  animation: spinning 1.2s infinite linear, fadeIn 0.75s forwards 0.75s;
}

@keyframes spinning {
  to {
    transform: rotate(1turn);
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}