Animação e microinterações

Animação criativa de carregamento

Efeitos visuais de pulso orbital e progresso de carregamento feitos puramente com CSS.

HTMLCSSanimaçãoLoading

É possível editar, executar e salvar este exemplo após ativar JavaScript. O código-fonte fixo é o seguinte:

<!doctype html>
<html lang="pt-BR" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animação criativa de carregamento</title>
  <style>
    * { box-sizing: border-box; }
    :root { color-scheme: dark; }
    body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; color: #dffaff; font-family: "Courier New", "Microsoft YaHei", monospace; background: #061015; background-image: linear-gradient(rgba(33,230,205,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(33,230,205,.035) 1px, transparent 1px); background-size: 32px 32px; }
    .console { width: min(620px, 100%); padding: clamp(26px, 6vw, 52px); border: 1px solid #164249; background: rgba(4,18,23,.9); box-shadow: 0 0 80px rgba(18,206,183,.08), inset 0 0 50px rgba(18,206,183,.03); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
    .console-head { display: flex; justify-content: space-between; gap: 16px; color: #37e2cd; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
    .loader { position: relative; width: 180px; height: 180px; margin: 50px auto 42px; display: grid; place-items: center; }
    .orbit { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: #2cf1d8; border-right-color: rgba(44,241,216,.18); border-radius: 50%; animation: spin 1.4s linear infinite; filter: drop-shadow(0 0 7px #2cf1d8); }
    .orbit:nth-child(2) { inset: 18px; border-top-color: #f2ce57; border-right-color: rgba(242,206,87,.16); animation-direction: reverse; animation-duration: 1.9s; }
    .orbit:nth-child(3) { inset: 38px; border-top-color: #ff657d; border-right-color: rgba(255,101,125,.18); animation-duration: .95s; }
    .core { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #2cf1d8; border-radius: 50%; color: #2cf1d8; font-size: 12px; font-weight: 800; background: #07171b; box-shadow: 0 0 25px rgba(44,241,216,.3); animation: pulse 1.2s ease-in-out infinite; }
    .status { margin-bottom: 12px; display: flex; justify-content: space-between; color: #87aeb2; font-size: 12px; }
    .status strong { color: #2cf1d8; }
    .track { height: 8px; overflow: hidden; border: 1px solid #164249; background: #0a1b20; }
    .track::before { content: ""; display: block; width: 45%; height: 100%; background: repeating-linear-gradient(90deg, #2cf1d8 0 8px, #139887 8px 11px); animation: loading 2.8s ease-in-out infinite; box-shadow: 0 0 16px #2cf1d8; }
    .log { margin: 22px 0 0; color: #537c80; font-size: 11px; line-height: 1.8; }
    .log span { color: #f2ce57; }
    @keyframes spin { to { transform: rotate(1turn); } }
    @keyframes pulse { 50% { transform: scale(.9); box-shadow: 0 0 10px rgba(44,241,216,.16); } }
    @keyframes loading { 0% { transform: translateX(-110%); } 50%, 75% { transform: translateX(120%); } 100% { transform: translateX(280%); } }
    @media (prefers-reduced-motion: reduce) {
      .orbit, .core, .track::before { animation: none; }
      .orbit { transform: rotate(28deg); }
      .orbit:nth-child(2) { transform: rotate(-52deg); }
      .orbit:nth-child(3) { transform: rotate(112deg); }
      .track::before { width: 72%; transform: none; }
    }
  </style>
</head>
<body>
  <main class="console" aria-label="Sistema carregando">
    <div class="console-head"><span>CORE.SYNC / 07</span><span>STATUS: ACTIVE</span></div>
    <div class="loader" aria-hidden="true"><i class="orbit"></i><i class="orbit"></i><i class="orbit"></i><span class="core">SYNC</span></div>
    <div class="status"><span>Estabelecendo conexão segura</span><strong>PROCESSING</strong></div>
    <div class="track" role="progressbar" aria-label="Carregamento com progresso indeterminado"></div>
    <p class="log"><span>›</span> handshake complete<br><span>›</span> loading interface modules...</p>
  </main>
</body>
</html>