loader géométrique 3×3, chaque carré flip avec décalage pour une cadence agréable.

<!-- 8) Flip Grid Loader -->
<div class="fx8-grid">
  <i></i><i></i><i></i>
  <i></i><i></i><i></i>
  <i></i><i></i><i></i>
</div>

<style>
.fx8-grid{
  width:96px; height:96px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:#fff; padding:10px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08), inset 0 1px 0 #fff;
}
.fx8-grid i{
  background:#0a84ff; border-radius:8px; transform-style:preserve-3d; opacity:.95;
  animation: fx8 1.2s ease-in-out infinite;
}
.fx8-grid i:nth-child(3n+2){ animation-delay:.1s } .fx8-grid i:nth-child(3n){ animation-delay:.2s }
.fx8-grid i:nth-child(n+4):nth-child(-n+6){ animation-delay:.15s }
@keyframes fx8{ 0%,100%{ transform: rotateX(0) } 50%{ transform: rotateX(180deg) } }

@media (prefers-reduced-motion: reduce){ .fx8-grid i{ animation:none; } }
</style>