Delay visibility of spinners usign css

It's common to show spinners when loading. It's common to delay the display of those spinners to avoid flicking. It's common to have ugly code to delay the visibility of spinners.

I've learn a trick that avoids the ugly code.

CSS to the rescue 👇

.visible-delay {
  animation: 0s linear 0.5s forwards makeVisible;
  visibility: hidden;
}

@keyframes makeVisible {
  to {
    visibility: visible;
  }
}

Then, wrap the spinner and use the css class:

<div class="visible-delay"><span class="spinner" /></div>

It will wait 0.5 seconds before displaying the spinner.

Updates #

Suggestions by J. Artero

Animation can handle everything :

.visible-delay {
  animation: 0.1s linear 0.5s both makeVisible;
}

@keyframes makeVisible {
  from {
    visibility: hidden;
  }
  to {
    visibility: visibility;
  }
}

Fade in:

.fade-in {
  animation: 1s ease-out 0.5s both fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Delay and fade:

@keyframes fadeInHidden {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  
  1% {
    opacity: 0.01;
    visibility: visible;
  }
  
  100% {
    opacity: 1;
    visibility: visible;
  }
}

From J. Artero:

My recommendation for that is that you do not do it because an element that loads if it does not occupy the position, another element will occupy its position if you use flex or grid without specifying positioning.