Animation et micro-interactions

Animation de chargement créative

Effet visuel de pulsation de rail et de progression de chargement réalisé entièrement avec CSS.

HTMLCSSAnimationLoading

Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :

<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animation de chargement créative</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="Chargement du système en cours">
    <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>Connexion sécurisée en cours d’établissement</span><strong>PROCESSING</strong></div>
    <div class="track" role="progressbar" aria-label="Chargement en cours, indéterminé"></div>
    <p class="log"><span>›</span> handshake complete<br><span>›</span> loading interface modules...</p>
  </main>
</body>
</html>