Rotating Squares

<!-- Rotating Squares Loader -->
<div class="nuda-rotating-squares" role="status" aria-label="Loading">
  <span></span>
  <span></span>
</div>

/* Rotating Squares Loader
   Two squares rotating around each other.
   Customize: --sq-color-a, --sq-color-b, --sq-size */

.nuda-rotating-squares {
  --sq-color-a: #818cf8;
  --sq-color-b: #f472b6;
  --sq-size: 18px;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 8px;
}

.nuda-rotating-squares span {
  position: absolute;
  width: var(--sq-size);
  height: var(--sq-size);
  border-radius: 3px;
  will-change: transform;
}

.nuda-rotating-squares span:nth-child(1) {
  background: var(--sq-color-a);
  animation: nuda-rot-sq-a 1.8s ease-in-out infinite;
}

.nuda-rotating-squares span:nth-child(2) {
  background: var(--sq-color-b);
  animation: nuda-rot-sq-b 1.8s ease-in-out infinite;
}

@keyframes nuda-rot-sq-a {
  0%   { top: 0; left: 0; transform: rotate(0deg); }
  50%  { top: 22px; left: 22px; transform: rotate(180deg); }
  100% { top: 0; left: 0; transform: rotate(360deg); }
}

@keyframes nuda-rot-sq-b {
  0%   { top: 22px; left: 22px; transform: rotate(0deg); }
  50%  { top: 0; left: 0; transform: rotate(180deg); }
  100% { top: 22px; left: 22px; transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-rotating-squares span {
    animation: none;
    opacity: 0.6;
  }
  .nuda-rotating-squares span:nth-child(1) { top: 0; left: 0; }
  .nuda-rotating-squares span:nth-child(2) { top: 22px; left: 22px; }
}