SVG Store bundle

Orbit Premium Loader System

Eight distinctive, production-ready loaders with a shared premium motion language.

Free 8 animations Free commercial license — unlimited personal and commercial use; attribution not required

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Orbit Premium Loader System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body{font-family:system-ui,sans-serif;margin:2rem;background:#f8fafc;color:#0f172a}section{margin:0 0 2rem;padding:1.5rem;border:1px solid #e2e8f0;background:#fff}svg{max-width:100%;height:auto}</style>
</head>
<body>
<h1>Orbit Premium Loader System</h1>
<p>Eight distinctive, production-ready loaders with a shared premium motion language.</p>
<section data-animation="prism-loop-loader">
<h2>Prism Loop Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-0c3a7441e911-sva-prism-loop-loader" role="img" aria-labelledby="sva-0c3a7441e911-sva-prism-loop-loader-title sva-0c3a7441e911-sva-prism-loop-loader-desc"><title id="sva-0c3a7441e911-sva-prism-loop-loader-title">Prism Loop Loader</title><desc id="sva-0c3a7441e911-sva-prism-loop-loader-desc">Layered prism outlines rotate in opposing directions.</desc><defs><linearGradient id="sva-0c3a7441e911-sva-prism-loop-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-0c3a7441e911-sva-prism-loop-loader{overflow:visible;background:#07111f}#sva-0c3a7441e911-sva-prism-loop-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-spin 5s linear infinite}#sva-0c3a7441e911-sva-prism-loop-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-reverse 4s linear infinite}#sva-0c3a7441e911-sva-prism-loop-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-0c3a7441e911-sva-prism-loop-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .dash{animation:sva-0c3a7441e911-sva-prism-loop-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-0c3a7441e911-sva-prism-loop-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-0c3a7441e911-sva-prism-loop-loader-shake 3s ease-in-out infinite}#sva-0c3a7441e911-sva-prism-loop-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-0c3a7441e911-sva-prism-loop-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .sweep{animation:sva-0c3a7441e911-sva-prism-loop-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .travel{animation:sva-0c3a7441e911-sva-prism-loop-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-0c3a7441e911-sva-prism-loop-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-0c3a7441e911-sva-prism-loop-loader .d2{animation-delay:-.7s}#sva-0c3a7441e911-sva-prism-loop-loader .d3{animation-delay:-1.35s}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-0c3a7441e911-sva-prism-loop-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-0c3a7441e911-sva-prism-loop-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><path d="M80 28l48 84H32z" fill="none" stroke="url(#sva-0c3a7441e911-sva-prism-loop-loader-g)" stroke-width="5"/><path d="M80 45l31 55H49z" fill="#0EA5E9" fill-opacity=".15" stroke="#A78BFA" stroke-width="3"/></g><g class="reverse"><path d="M80 58l18 32H62z" fill="#F8FAFC" fill-opacity=".9"/></g></svg>
</section>
<section data-animation="infinity-flow-loader">
<h2>Infinity Flow Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-2b143d50d1e8-sva-infinity-flow-loader" role="img" aria-labelledby="sva-2b143d50d1e8-sva-infinity-flow-loader-title sva-2b143d50d1e8-sva-infinity-flow-loader-desc"><title id="sva-2b143d50d1e8-sva-infinity-flow-loader-title">Infinity Flow Loader</title><desc id="sva-2b143d50d1e8-sva-infinity-flow-loader-desc">An infinity path traces continuously with a soft leading glow.</desc><defs><linearGradient id="sva-2b143d50d1e8-sva-infinity-flow-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-2b143d50d1e8-sva-infinity-flow-loader{overflow:visible;background:#07111f}#sva-2b143d50d1e8-sva-infinity-flow-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-spin 5s linear infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-reverse 4s linear infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .dash{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-shake 3s ease-in-out infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .sweep{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .travel{animation:sva-2b143d50d1e8-sva-infinity-flow-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-2b143d50d1e8-sva-infinity-flow-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-2b143d50d1e8-sva-infinity-flow-loader .d2{animation-delay:-.7s}#sva-2b143d50d1e8-sva-infinity-flow-loader .d3{animation-delay:-1.35s}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-2b143d50d1e8-sva-infinity-flow-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-2b143d50d1e8-sva-infinity-flow-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><path class="draw" d="M24 80c19-35 42-35 56 0 14 35 37 35 56 0-19-35-42-35-56 0-14 35-37 35-56 0z" fill="none" stroke="url(#sva-2b143d50d1e8-sva-infinity-flow-loader-g)" stroke-width="8" stroke-linecap="round"/><circle class="travel" cx="80" cy="80" r="6" fill="#F8FAFC"/></svg>
</section>
<section data-animation="pulse-matrix-loader">
<h2>Pulse Matrix Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-56f6bcaa3c31-sva-pulse-matrix-loader" role="img" aria-labelledby="sva-56f6bcaa3c31-sva-pulse-matrix-loader-title sva-56f6bcaa3c31-sva-pulse-matrix-loader-desc"><title id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-title">Pulse Matrix Loader</title><desc id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-desc">A precise 3-by-3 light matrix with staggered depth.</desc><defs><linearGradient id="sva-56f6bcaa3c31-sva-pulse-matrix-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-56f6bcaa3c31-sva-pulse-matrix-loader{overflow:visible;background:#07111f}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-spin 5s linear infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-reverse 4s linear infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .dash{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-shake 3s ease-in-out infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .sweep{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .travel{animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-56f6bcaa3c31-sva-pulse-matrix-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .d2{animation-delay:-.7s}#sva-56f6bcaa3c31-sva-pulse-matrix-loader .d3{animation-delay:-1.35s}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-56f6bcaa3c31-sva-pulse-matrix-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-56f6bcaa3c31-sva-pulse-matrix-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g fill="#0EA5E9"><circle class="pulse" cx="52" cy="52" r="8"/><circle class="pulse d2" cx="80" cy="52" r="8"/><circle class="pulse d3" cx="108" cy="52" r="8"/><circle class="pulse d2" cx="52" cy="80" r="8"/><circle class="pulse d3" cx="80" cy="80" r="10" fill="#A78BFA"/><circle class="pulse" cx="108" cy="80" r="8"/><circle class="pulse d3" cx="52" cy="108" r="8"/><circle class="pulse" cx="80" cy="108" r="8"/><circle class="pulse d2" cx="108" cy="108" r="8"/></g></svg>
</section>
<section data-animation="comet-ring-loader">
<h2>Comet Ring Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-59b3490a2a69-sva-comet-ring-loader" role="img" aria-labelledby="sva-59b3490a2a69-sva-comet-ring-loader-title sva-59b3490a2a69-sva-comet-ring-loader-desc"><title id="sva-59b3490a2a69-sva-comet-ring-loader-title">Comet Ring Loader</title><desc id="sva-59b3490a2a69-sva-comet-ring-loader-desc">A bright comet travels around a restrained progress ring.</desc><defs><linearGradient id="sva-59b3490a2a69-sva-comet-ring-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-59b3490a2a69-sva-comet-ring-loader{overflow:visible;background:#07111f}#sva-59b3490a2a69-sva-comet-ring-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-spin 5s linear infinite}#sva-59b3490a2a69-sva-comet-ring-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-reverse 4s linear infinite}#sva-59b3490a2a69-sva-comet-ring-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-59b3490a2a69-sva-comet-ring-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .dash{animation:sva-59b3490a2a69-sva-comet-ring-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-59b3490a2a69-sva-comet-ring-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-59b3490a2a69-sva-comet-ring-loader-shake 3s ease-in-out infinite}#sva-59b3490a2a69-sva-comet-ring-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-59b3490a2a69-sva-comet-ring-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .sweep{animation:sva-59b3490a2a69-sva-comet-ring-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .travel{animation:sva-59b3490a2a69-sva-comet-ring-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-59b3490a2a69-sva-comet-ring-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-59b3490a2a69-sva-comet-ring-loader .d2{animation-delay:-.7s}#sva-59b3490a2a69-sva-comet-ring-loader .d3{animation-delay:-1.35s}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-59b3490a2a69-sva-comet-ring-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-59b3490a2a69-sva-comet-ring-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><circle cx="80" cy="80" r="47" fill="none" stroke="#0EA5E9" stroke-opacity=".16" stroke-width="9"/><circle class="spin dash" cx="80" cy="80" r="47" fill="none" stroke="url(#sva-59b3490a2a69-sva-comet-ring-loader-g)" stroke-width="9" stroke-linecap="round" stroke-dasharray="92 203"/><circle class="pulse" cx="80" cy="80" r="9" fill="#A78BFA"/></svg>
</section>
<section data-animation="hexa-phase-loader">
<h2>Hexa Phase Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-82e962148260-sva-hexa-phase-loader" role="img" aria-labelledby="sva-82e962148260-sva-hexa-phase-loader-title sva-82e962148260-sva-hexa-phase-loader-desc"><title id="sva-82e962148260-sva-hexa-phase-loader-title">Hexa Phase Loader</title><desc id="sva-82e962148260-sva-hexa-phase-loader-desc">Nested hexagons phase through rotation and scale.</desc><defs><linearGradient id="sva-82e962148260-sva-hexa-phase-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-82e962148260-sva-hexa-phase-loader{overflow:visible;background:#07111f}#sva-82e962148260-sva-hexa-phase-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-spin 5s linear infinite}#sva-82e962148260-sva-hexa-phase-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-reverse 4s linear infinite}#sva-82e962148260-sva-hexa-phase-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-82e962148260-sva-hexa-phase-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .dash{animation:sva-82e962148260-sva-hexa-phase-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-82e962148260-sva-hexa-phase-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-82e962148260-sva-hexa-phase-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-82e962148260-sva-hexa-phase-loader-shake 3s ease-in-out infinite}#sva-82e962148260-sva-hexa-phase-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-82e962148260-sva-hexa-phase-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .sweep{animation:sva-82e962148260-sva-hexa-phase-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .travel{animation:sva-82e962148260-sva-hexa-phase-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-82e962148260-sva-hexa-phase-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-82e962148260-sva-hexa-phase-loader .d2{animation-delay:-.7s}#sva-82e962148260-sva-hexa-phase-loader .d3{animation-delay:-1.35s}@keyframes sva-82e962148260-sva-hexa-phase-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-82e962148260-sva-hexa-phase-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-82e962148260-sva-hexa-phase-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-82e962148260-sva-hexa-phase-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-82e962148260-sva-hexa-phase-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-82e962148260-sva-hexa-phase-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-82e962148260-sva-hexa-phase-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-82e962148260-sva-hexa-phase-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><path d="M80 24l49 28v56l-49 28-49-28V52z" fill="none" stroke="#0EA5E9" stroke-width="5"/><path d="M80 46l30 17v34l-30 17-30-17V63z" fill="#0EA5E9" fill-opacity=".14" stroke="#A78BFA" stroke-width="4"/></g><path class="pulse" d="M80 65l13 8v15l-13 8-13-8V73z" fill="#F8FAFC"/></svg>
</section>
<section data-animation="quantum-orbit-loader">
<h2>Quantum Orbit Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-97792cf3edae-sva-quantum-orbit-loader" role="img" aria-labelledby="sva-97792cf3edae-sva-quantum-orbit-loader-title sva-97792cf3edae-sva-quantum-orbit-loader-desc"><title id="sva-97792cf3edae-sva-quantum-orbit-loader-title">Quantum Orbit Loader</title><desc id="sva-97792cf3edae-sva-quantum-orbit-loader-desc">Three elliptical orbits and particles form an atomic loader.</desc><defs><linearGradient id="sva-97792cf3edae-sva-quantum-orbit-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-97792cf3edae-sva-quantum-orbit-loader{overflow:visible;background:#07111f}#sva-97792cf3edae-sva-quantum-orbit-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-spin 5s linear infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-reverse 4s linear infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-97792cf3edae-sva-quantum-orbit-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .dash{animation:sva-97792cf3edae-sva-quantum-orbit-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-97792cf3edae-sva-quantum-orbit-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-97792cf3edae-sva-quantum-orbit-loader-shake 3s ease-in-out infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-97792cf3edae-sva-quantum-orbit-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .sweep{animation:sva-97792cf3edae-sva-quantum-orbit-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .travel{animation:sva-97792cf3edae-sva-quantum-orbit-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-97792cf3edae-sva-quantum-orbit-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-97792cf3edae-sva-quantum-orbit-loader .d2{animation-delay:-.7s}#sva-97792cf3edae-sva-quantum-orbit-loader .d3{animation-delay:-1.35s}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-97792cf3edae-sva-quantum-orbit-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-97792cf3edae-sva-quantum-orbit-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin" fill="none" stroke="#0EA5E9" stroke-width="3"><ellipse cx="80" cy="80" rx="54" ry="21"/><ellipse cx="80" cy="80" rx="54" ry="21" transform="rotate(60 80 80)"/><ellipse cx="80" cy="80" rx="54" ry="21" transform="rotate(120 80 80)"/></g><circle class="pulse" cx="80" cy="80" r="10" fill="#A78BFA"/><circle class="pop" cx="129" cy="80" r="6" fill="#F8FAFC"/></svg>
</section>
<section data-animation="waveform-scan-loader">
<h2>Waveform Scan Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-b14a76c10539-sva-waveform-scan-loader" role="img" aria-labelledby="sva-b14a76c10539-sva-waveform-scan-loader-title sva-b14a76c10539-sva-waveform-scan-loader-desc"><title id="sva-b14a76c10539-sva-waveform-scan-loader-title">Waveform Scan Loader</title><desc id="sva-b14a76c10539-sva-waveform-scan-loader-desc">Responsive-looking waveform bars animate around a center pulse.</desc><defs><linearGradient id="sva-b14a76c10539-sva-waveform-scan-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-b14a76c10539-sva-waveform-scan-loader{overflow:visible;background:#07111f}#sva-b14a76c10539-sva-waveform-scan-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-spin 5s linear infinite}#sva-b14a76c10539-sva-waveform-scan-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-reverse 4s linear infinite}#sva-b14a76c10539-sva-waveform-scan-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-b14a76c10539-sva-waveform-scan-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .dash{animation:sva-b14a76c10539-sva-waveform-scan-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-b14a76c10539-sva-waveform-scan-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-b14a76c10539-sva-waveform-scan-loader-shake 3s ease-in-out infinite}#sva-b14a76c10539-sva-waveform-scan-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-b14a76c10539-sva-waveform-scan-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .sweep{animation:sva-b14a76c10539-sva-waveform-scan-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .travel{animation:sva-b14a76c10539-sva-waveform-scan-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-b14a76c10539-sva-waveform-scan-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-b14a76c10539-sva-waveform-scan-loader .d2{animation-delay:-.7s}#sva-b14a76c10539-sva-waveform-scan-loader .d3{animation-delay:-1.35s}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-b14a76c10539-sva-waveform-scan-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-b14a76c10539-sva-waveform-scan-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g fill="url(#sva-b14a76c10539-sva-waveform-scan-loader-g)"><rect class="rise" x="30" y="61" width="10" height="38" rx="5"/><rect class="rise d2" x="48" y="45" width="10" height="70" rx="5"/><rect class="rise d3" x="66" y="29" width="10" height="102" rx="5"/><rect class="rise" x="84" y="38" width="10" height="84" rx="5"/><rect class="rise d2" x="102" y="52" width="10" height="56" rx="5"/><rect class="rise d3" x="120" y="66" width="10" height="28" rx="5"/></g></svg>
</section>
<section data-animation="constellation-orbit-loader">
<h2>Constellation Orbit Loader</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" id="sva-f9e22289a39a-sva-constellation-orbit-loader" role="img" aria-labelledby="sva-f9e22289a39a-sva-constellation-orbit-loader-title sva-f9e22289a39a-sva-constellation-orbit-loader-desc"><title id="sva-f9e22289a39a-sva-constellation-orbit-loader-title">Constellation Orbit Loader</title><desc id="sva-f9e22289a39a-sva-constellation-orbit-loader-desc">Orbiting constellation nodes with a calm luminous rhythm.</desc><defs><linearGradient id="sva-f9e22289a39a-sva-constellation-orbit-loader-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0EA5E9"/><stop offset="1" stop-color="#A78BFA"/></linearGradient></defs><style>#sva-f9e22289a39a-sva-constellation-orbit-loader{overflow:visible;background:#07111f}#sva-f9e22289a39a-sva-constellation-orbit-loader .spin{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-spin 5s linear infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .reverse{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-reverse 4s linear infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .pulse{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .float{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-float 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .draw{stroke-dasharray:260;stroke-dashoffset:260;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-draw 3.2s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .dash{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-dash 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .pop{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-pop 2.8s cubic-bezier(.2,.9,.25,1.25) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .rise{transform-box:fill-box;transform-origin:center bottom;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-rise 2.6s cubic-bezier(.2,.8,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .shake{transform-box:fill-box;transform-origin:center top;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-shake 3s ease-in-out infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .slide{transform-box:fill-box;transform-origin:center;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-slide 3s cubic-bezier(.65,0,.35,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .sweep{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-sweep 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .travel{animation:sva-f9e22289a39a-sva-constellation-orbit-loader-travel 3s cubic-bezier(.4,0,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .tilt{transform-box:fill-box;transform-origin:0% 100%;animation:sva-f9e22289a39a-sva-constellation-orbit-loader-tilt 3s cubic-bezier(.2,.8,.2,1) infinite}#sva-f9e22289a39a-sva-constellation-orbit-loader .d2{animation-delay:-.7s}#sva-f9e22289a39a-sva-constellation-orbit-loader .d3{animation-delay:-1.35s}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-spin{to{transform:rotate(360deg)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-reverse{to{transform:rotate(-360deg)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-pulse{0%,100%{transform:scale(.92);opacity:.6}45%{transform:scale(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-5px)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-draw{0%{stroke-dashoffset:260;opacity:.25}45%,75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-260;opacity:.25}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-dash{0%{stroke-dashoffset:220}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-pop{0%,15%,100%{transform:scale(.5);opacity:0}35%,75%{transform:scale(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-rise{0%,100%{transform:scaleY(.28);opacity:.45}45%,72%{transform:scaleY(1);opacity:1}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-shake{0%,22%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}38%{transform:rotate(8deg)}46%{transform:rotate(-5deg)}54%{transform:rotate(0)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-slide{0%,20%{transform:translateX(0)}45%,75%{transform:translateX(48px)}100%{transform:translateX(0)}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-sweep{0%,15%{transform:translateX(-18px);opacity:.25}45%,75%{transform:translateX(18px);opacity:1}100%{transform:translateX(-18px);opacity:.25}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-travel{0%{transform:translateX(-28px);opacity:0}25%,70%{opacity:1}100%{transform:translateX(28px);opacity:0}}@keyframes sva-f9e22289a39a-sva-constellation-orbit-loader-tilt{0%,15%{transform:rotate(-42deg)}50%,80%{transform:rotate(0)}100%{transform:rotate(-42deg)}}@media(prefers-reduced-motion:reduce){#sva-f9e22289a39a-sva-constellation-orbit-loader *{animation:none!important;transform:none!important;opacity:1!important}}</style><rect x="4" y="4" width="152" height="152" rx="38" fill="#07111f" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><g class="spin"><circle cx="80" cy="80" r="45" fill="none" stroke="#0EA5E9" stroke-opacity=".2" stroke-width="2"/><path d="M80 35l38 26-15 44-46 8-21-41z" fill="none" stroke="#0EA5E9" stroke-opacity=".45" stroke-width="2"/><g fill="url(#sva-f9e22289a39a-sva-constellation-orbit-loader-g)"><circle cx="80" cy="35" r="7"/><circle cx="118" cy="61" r="5"/><circle cx="103" cy="105" r="6"/><circle cx="57" cy="113" r="5"/><circle cx="36" cy="72" r="6"/></g></g><circle class="pulse" cx="80" cy="80" r="12" fill="#A78BFA"/></svg>
</section>
</body>
</html>

Download

Included assets

Orbiting constellation nodes with a calm luminous rhythm.

Download