Animation & Microinteractions

Creative Loading Animation

Pure visual effects of orbital pulses and loading progress made with CSS.

HTMLCSSAnimationLoading

With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Creative Loading Animation</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="System loading">
    <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>Secure connection is being established</span><strong>PROCESSING</strong></div>
    <div class="track" role="progressbar" aria-label="Loading progress indeterminate"></div>
    <p class="log"><span>›</span> handshake complete<br><span>›</span> loading interface modules...</p>
  </main>
</body>
</html>