Módulo 04: HTML5 e CSS3 Moderno • Bloco 5: Animações e Performance • Demonstrações Práticas

1. Exemplo: Skeleton Loading Shimmer e Spinner Giratório

<!-- keyframes_skeleton_loading_demo.html -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Animações Keyframes e Skeleton Screen</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 32px; }

    /* 1. Spinner Giratório Infinito */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #e2e8f0;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* 2. Skeleton Loading com Efeito Shimmer */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    .skeleton-card {
      width: 360px;
      background: white;
      padding: 24px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .sk-line {
      height: 16px;
      border-radius: 4px;
      background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    .sk-title { width: 60%; height: 24px; }
    .sk-text-1 { width: 100%; }
    .sk-text-2 { width: 85%; }
    .sk-btn { width: 40%; height: 36px; margin-top: 8px; border-radius: 6px; }

    /* 3. Acessibilidade: Respeitando a preferência de movimento reduzido */
    @media (prefers-reduced-motion: reduce) {
      .loading-spinner, .sk-line {
        animation: none;
      }
    }
  </style>
</head>
<body>

  <div>
    <h3>1. Spinner CSS Nativo</h3>
    <div class="loading-spinner" style="margin-top: 12px;"></div>
  </div>

  <div>
    <h3>2. Skeleton Screen com Efeito Shimmer</h3>
    <div class="skeleton-card" style="margin-top: 12px;">
      <div class="sk-line sk-title"></div>
      <div class="sk-line sk-text-1"></div>
      <div class="sk-line sk-text-2"></div>
      <div class="sk-line sk-btn"></div>
    </div>
  </div>

</body>
</html>