.i-spinner {
    border: 8px solid #cdcdcd;
    border-radius: 50%;
    border-top: 8px solid var(--blue);
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    animation: i_spinner_spin 1s linear infinite, i_spinner_appear 2s ease-in;
}

@keyframes i_spinner_appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes i_spinner_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}