/*!
* SDS Motion Forge — standalone loaders bundle
* Generated from src/categories/ by scripts/build-categories.js — do not edit.
* Contains: core (tokens, modifiers, reduced-motion, scroll gate) + loaders +
* cross-category keyframe dependencies. Combining 2+ categories? Use
* dist/motion.css instead — it ships exactly one copy of core.
*/
/*!
* SDS Motion Forge — core.css
* Core — design tokens, utility modifiers, reduced-motion neutralization,
* and scroll-gate infrastructure shared by every category.
* Part of the lossless v5 category split — combined entry: src/motion.css
*/
/**
* SDS Motion Forge — Premium CSS Animation System
* Version: 5.0.0
* Author: Salkom Design Studio
* License: MIT
* https://github.com/salkomdesignstudio/SDS-Motion-Forge
*
* 600+ production-ready CSS animations · Framework-agnostic
* Text (104) · Buttons (100) · Inputs (100) · Cards (100) · Loaders (100) · Scroll (100)
*
* Optional engines (load with defer):
* sds-scroll.min.js — scroll-gate via [data-sds] attribute
* motion-interactive.min.js — cursor-reactive & hover interactive animations
*
* ─── HOW TO INSTALL ──────────────────────────────────────────
*
* CDN (simplest — paste in ):
* Heading
* Paragraph
* Button
* Card
*
* Word By Word
*
*
* Classes that need this: sds-kinetic-wave, sds-stagger-chars,
* sds-arc-orbit, sds-signal-wave, sds-card-stagger,
* sds-card-cascade, sds-card-slice, sds-loader-dots,
* sds-loader-wave, sds-loader-signal, sds-loader-cascade,
* sds-loader-grid, sds-scroll-stagger-pop, sds-scroll-stagger-grid,
* sds-scroll-cascade
*
* ─── SCROLL ANIMATIONS ───────────────────────────────────────
*
* Scroll animations fire when the class is added to the element,
* not automatically on scroll. Use one of these two methods:
*
* Method 1 — data-sds-scroll (works everywhere, paste once):
* Content
*
*
* Method 2 — sds-scroll-auto (Chrome 115+, zero JS):
* Content
*
* ─── BUG FIXES IN THIS BUILD ─────────────────────────────────
*
* ✓ sds-loader-progress/data/bar — position:relative added
* ✓ will-change on GPU-heavy animations — no jank
* ✓ backface-visibility on 3D transforms — no Chrome flicker
* ✓ max-width:max-content on typewriter — no text clipping
* ✓ prefers-reduced-motion — scroll elements stay visible
* ✓ CSS scroll-driven animations via .sds-scroll-auto
*
*/
/* ============================================================
DESIGN TOKENS
Override these in :root to theme SDS Motion to your brand.
============================================================ */
:root {
--sds-primary: #0015d1;
--sds-primary-dim: rgba(0, 21, 209, 0.08);
--sds-primary-glow: rgba(0, 21, 209, 0.3);
--sds-accent: #d10028;
--sds-success: #00c48c;
/* ── v5 Motion Token Scale ──────────────────────────────────
Source of truth: tokens/motion.tokens.json (W3C Design Tokens).
Regenerate with `npm run build:tokens`. See SPEC.md. */
/* @sds-generated-tokens:start — generated from tokens/motion.tokens.json by scripts/generate-tokens.js; do not edit by hand */
--sds-duration-instant: 0.3s;
--sds-duration-fast: 0.4s;
--sds-duration-base: 0.8s;
--sds-duration-slow: 1.4s;
--sds-duration-slower: 2.2s;
--sds-duration-dramatic: 3s;
--sds-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--sds-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
--sds-ease-accelerate: cubic-bezier(0.6, -0.28, 0.74, 0.05);
--sds-ease-emphasized: cubic-bezier(0.215, 0.61, 0.355, 1);
--sds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--sds-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--sds-distance-sm: 24px;
--sds-distance-md: 48px;
--sds-distance-lg: 80px;
/* @sds-generated-tokens:end */
/* Legacy tokens — permanent public API (R2). They now resolve
through the v5 scale; computed defaults are unchanged
(0.8s / cubic-bezier(0.22, 1, 0.36, 1)). */
--sds-duration: var(--sds-duration-base, 0.8s);
--sds-easing: var(--sds-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
}
/* ============================================================
ACCESSIBILITY — REDUCED MOTION
Matches the user's OS preference. Skips all animation.
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* `> *` added in v5 (R5 gate): child-driven effects (kinetic-wave,
staggers, loader dots/bars) animate plain child elements that carry no
sds- class of their own — without it they kept moving under reduced
motion in <= 4.0.3. */
[class*="sds-"],
[class*="sds-"] > *,
[class*="sds-"]::before,
[class*="sds-"]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* Scroll-animated elements must stay visible under reduced motion */
[class*="sds-scroll-"],
[class*="sds-scroll-"] > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
}
/* ============================================================
UTILITY MODIFIERS
Stack these on any animation class.
============================================================ */
/* Delay helpers */
.sds-delay-1 {
animation-delay: 0.1s !important;
}
.sds-delay-2 {
animation-delay: 0.2s !important;
}
.sds-delay-3 {
animation-delay: 0.3s !important;
}
.sds-delay-4 {
animation-delay: 0.4s !important;
}
.sds-delay-5 {
animation-delay: 0.5s !important;
}
.sds-delay-6 {
animation-delay: 0.6s !important;
}
.sds-delay-8 {
animation-delay: 0.8s !important;
}
.sds-delay-10 {
animation-delay: 1s !important;
}
/* Duration helpers — override --sds-duration token */
.sds-fast {
--sds-duration: var(--sds-duration-fast, 0.4s);
}
.sds-normal {
--sds-duration: var(--sds-duration-base, 0.8s);
}
.sds-slow {
--sds-duration: var(--sds-duration-slow, 1.4s);
}
.sds-xslow {
--sds-duration: var(--sds-duration-slower, 2.2s);
}
/* Iteration helpers */
.sds-once {
animation-iteration-count: 1 !important;
animation-fill-mode: both !important;
}
/* Cascade to > * so stagger/wave containers (arc-orbit, kinetic-wave, signal-wave,
stagger-pop, stagger-grid) loop correctly — their animations live on children. */
.sds-loop,
.sds-loop > * {
animation-iteration-count: infinite !important;
}
.sds-alt,
.sds-alt > * {
animation-direction: alternate;
animation-iteration-count: infinite !important;
}
/* Fill modes */
.sds-fill-both {
animation-fill-mode: both !important;
}
.sds-fill-forward {
animation-fill-mode: forwards !important;
}
/* Pause on hover */
.sds-pause-hover:hover,
.sds-pause-hover:hover *,
.sds-pause-hover:hover::before,
.sds-pause-hover:hover::after {
animation-play-state: paused !important;
}
/* ============================================================
SCROLL ANIMATION ACTIVATION
============================================================
Add data-sds-scroll to your element, then include this
script once in your page. The animation fires when the
element enters the viewport.
Your content
============================================================ */
[data-sds-scroll][class*="sds-scroll-"] {
opacity: 0;
animation-play-state: paused;
}
[data-sds-scroll].sds-in[class*="sds-scroll-"] {
opacity: 1;
animation-play-state: running;
}
/* CSS Scroll-Driven Animations — Chrome 115+, zero JS */
@supports (animation-timeline: scroll()) {
.sds-scroll-auto[class*="sds-scroll-"] {
animation-timeline: view();
animation-range: entry 0% entry 40%;
animation-play-state: running;
opacity: 1;
}
}
/* ============================================================
SCROLL GATE — sds-scroll.js engine (data-sds attribute)
============================================================
Requires:
The JS adds "sds-js" to and "sds-play" to each
[data-sds] element when it enters the viewport.
============================================================ */
/* Gate: hidden + paused until JS grants sds-play */
[data-sds]:not(.sds-play) {
animation-play-state: paused !important;
animation-delay: -1ms !important;
opacity: 0 !important;
}
/* Release: visible + running */
[data-sds].sds-play {
opacity: 1;
animation-play-state: running !important;
}
/* Fallback: if JS never loads, show content normally */
html:not(.sds-js) [data-sds] {
opacity: 1 !important;
animation-play-state: running !important;
}
/* v5 fix (additive): while an element is scroll-gated it is opacity:0, but
its PAUSED 0% keyframe still applied clip-path/transform — and Chromium
computes IntersectionObserver geometry AFTER the target's own clip and
transform. Effects whose first frame fully clips (curtain, clip-left/right,
radial, ink, scan, split) or moves the box off-screen (velvet, gravity)
therefore NEVER intersected and never played in <= 4.0.3, with every
documented scroll method. Neutralizing clip/transform only in the hidden,
gated state restores the element's real box for the observer; the moment
sds-play / sds-in lands, these rules stop matching and the animation plays
from its true 0% frame. */
[data-sds]:not(.sds-play),
[data-sds-scroll][class*="sds-scroll-"]:not(.sds-in) {
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
}
/*!
* SDS Motion Forge — loaders.css
* Loader animations (Section 5).
* Part of the lossless v5 category split — combined entry: src/motion.css
*/
/* ============================================================
SECTION 5 — LOADER ANIMATIONS
Namespace: .sds-loader-*
============================================================ */
/* 67 · Orbital System -------------------------------------- */
.sds-loader-orbital {
position: relative;
width: 48px;
height: 48px;
}
.sds-loader-orbital::before,
.sds-loader-orbital::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sds-primary);
top: 50%;
left: 50%;
margin: -4px 0 0 -4px;
}
.sds-loader-orbital::before {
animation: sds-orbitalA 1.2s linear infinite;
}
.sds-loader-orbital::after {
animation: sds-orbitalB 1.8s linear infinite;
}
@keyframes sds-orbitalA {
from {
transform: rotate(0deg) translateX(18px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(18px) rotate(-360deg);
}
}
@keyframes sds-orbitalB {
from {
transform: rotate(120deg) translateX(26px) rotate(-120deg);
}
to {
transform: rotate(480deg) translateX(26px) rotate(-480deg);
}
}
/* 68 · Fluid Flow ------------------------------------------ */
.sds-loader-fluid {
width: 36px;
height: 36px;
background: var(--sds-primary);
animation: sds-fluidFlow 2s ease infinite;
}
@keyframes sds-fluidFlow {
0% {
border-radius: 50%;
transform: scale(1) rotate(0);
}
25% {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
transform: scale(1.15) rotate(45deg);
}
50% {
border-radius: 50%;
transform: scale(0.9) rotate(90deg);
}
75% {
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
transform: scale(1.1) rotate(135deg);
}
100% {
border-radius: 50%;
transform: scale(1) rotate(180deg);
}
}
/* 69 · Particle Sync --------------------------------------- */
.sds-loader-dots {
display: inline-flex;
gap: 6px;
}
.sds-loader-dots > * {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-particleSync 1s ease infinite;
}
.sds-loader-dots > *:nth-child(2) {
animation-delay: 0.2s;
}
.sds-loader-dots > *:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes sds-particleSync {
0%,
100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(0);
opacity: 0;
}
}
/* 70 · Comet Trail ----------------------------------------- */
.sds-loader-comet {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--sds-primary-dim);
}
.sds-loader-comet::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--sds-primary);
animation: sds-cometSpin 1s linear infinite;
}
@keyframes sds-cometSpin {
to {
transform: rotate(360deg);
}
}
/* 71 · Waveform -------------------------------------------- */
.sds-loader-wave {
display: inline-flex;
gap: 3px;
align-items: center;
height: 32px;
}
.sds-loader-wave > * {
width: 4px;
border-radius: 2px;
background: var(--sds-primary);
animation: sds-waveBar 0.9s ease infinite;
}
.sds-loader-wave > *:nth-child(1) {
animation-delay: 0s;
height: 60%;
}
.sds-loader-wave > *:nth-child(2) {
animation-delay: 0.15s;
height: 90%;
}
.sds-loader-wave > *:nth-child(3) {
animation-delay: 0.3s;
height: 50%;
}
.sds-loader-wave > *:nth-child(4) {
animation-delay: 0.1s;
height: 80%;
}
.sds-loader-wave > *:nth-child(5) {
animation-delay: 0.25s;
height: 65%;
}
@keyframes sds-waveBar {
0%,
100% {
transform: scaleY(0.2);
}
50% {
transform: scaleY(1);
}
}
/* 72 · Ping Cascade ---------------------------------------- */
.sds-loader-ping {
position: relative;
width: 16px;
height: 16px;
}
/* Pseudo-elements get content:''; real does not need it */
.sds-loader-ping::before,
.sds-loader-ping::after {
content: "";
}
.sds-loader-ping::before,
.sds-loader-ping::after,
.sds-loader-ping > span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--sds-primary);
animation: sds-pingCascade 2s ease infinite;
}
.sds-loader-ping::after {
animation-delay: 0.6s;
}
.sds-loader-ping > span {
animation-delay: 1.2s;
}
@keyframes sds-pingCascade {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* 73 · Progress Glow --------------------------------------- */
/* Uses transform:scaleX to avoid width-animation reflow */
.sds-loader-progress {
width: 100%;
height: 4px;
background: var(--sds-primary-dim);
border-radius: 99px;
overflow: hidden;
position: relative;
}
.sds-loader-progress::after {
content: "";
display: block;
height: 100%;
width: 100%;
background: var(--sds-primary);
border-radius: 99px;
transform-origin: left center;
animation: sds-progressGlow 2s ease infinite;
}
@keyframes sds-progressGlow {
0% {
transform: scaleX(0);
box-shadow: none;
}
50% {
box-shadow:
0 0 12px var(--sds-primary-glow),
4px 0 16px var(--sds-primary-glow);
}
85% {
transform: scaleX(1);
box-shadow: 0 0 8px var(--sds-primary-glow);
}
100% {
transform: scaleX(1);
box-shadow: 0 0 8px var(--sds-primary-glow);
}
}
/* 74 · Skeleton Pulse -------------------------------------- */
.sds-loader-skeleton {
background: linear-gradient(
90deg,
var(--sds-primary-dim) 25%,
rgba(0, 21, 209, 0.04) 50%,
var(--sds-primary-dim) 75%
);
background-size: 400% 100%;
animation: sds-skeletonPulse 1.6s ease infinite;
border-radius: 4px;
}
@keyframes sds-skeletonPulse {
0% {
background-position: -300% 0;
}
100% {
background-position: 300% 0;
}
}
/* 75 · Vortex Spin ----------------------------------------- */
.sds-loader-vortex {
width: 36px;
height: 36px;
border-radius: 50%;
background: conic-gradient(
var(--sds-primary),
var(--sds-accent),
var(--sds-primary)
);
animation: sds-vortexSpin 1.6s ease infinite;
}
@keyframes sds-vortexSpin {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.7);
}
to {
transform: rotate(360deg) scale(1);
}
}
/* 76 · Typewriter Loader ----------------------------------- */
.sds-loader-type {
font-family: monospace;
border-right: 2px solid var(--sds-primary);
overflow: hidden;
white-space: nowrap;
animation:
sds-typewriterPrem 2s steps(10) infinite alternate,
sds-cursorBlink var(--sds-duration-base, 0.8s) step-end infinite;
}
/* 77 · Target Lock ----------------------------------------- */
.sds-loader-target {
position: relative;
width: 40px;
height: 40px;
}
.sds-loader-target::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px dashed rgba(0, 21, 209, 0.3);
animation: sds-cometSpin 4s linear infinite;
}
/* 78 · DNA Helix ------------------------------------------- */
.sds-loader-dna {
position: relative;
width: 10px;
height: 48px;
}
.sds-loader-dna::before,
.sds-loader-dna::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
left: 0;
animation: sds-loaderDna var(--sds-duration-slow, 1.4s) ease-in-out infinite;
}
.sds-loader-dna::before {
background: var(--sds-primary);
}
.sds-loader-dna::after {
background: var(--sds-accent);
animation-delay: 0.7s;
}
@keyframes sds-loaderDna {
0%,
100% {
top: 0;
transform: scaleX(1);
opacity: 1;
}
25% {
transform: scaleX(0.4);
opacity: 0.4;
}
50% {
top: 38px;
transform: scaleX(1);
opacity: 1;
}
75% {
transform: scaleX(0.4);
opacity: 0.4;
}
}
/* 79 · Pulse ------------------------------------------- */
.sds-loader-pulse {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderPulse 1s ease-in-out infinite;
}
@keyframes sds-loaderPulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.4;
}
}
/* 80 · Arc -------------------------------------------- */
.sds-loader-arc {
position: relative;
width: 44px;
height: 44px;
}
.sds-loader-arc::before,
.sds-loader-arc::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid transparent;
}
.sds-loader-arc::before {
border-top-color: var(--sds-primary);
border-right-color: var(--sds-primary);
animation: sds-cometSpin 0.9s linear infinite;
}
.sds-loader-arc::after {
border-bottom-color: var(--sds-accent);
border-left-color: var(--sds-accent);
animation: sds-cometSpin var(--sds-duration-slow, 1.4s) linear infinite reverse;
inset: 6px;
}
/* 81 · Signal Bars ------------------------------------- */
.sds-loader-signal {
display: inline-flex;
align-items: flex-end;
gap: 4px;
height: 36px;
}
.sds-loader-signal > * {
width: 7px;
border-radius: 3px 3px 0 0;
background: var(--sds-primary);
animation: sds-loaderSignal 1.2s ease-in-out infinite;
}
.sds-loader-signal > *:nth-child(1) {
height: 35%;
animation-delay: 0s;
}
.sds-loader-signal > *:nth-child(2) {
height: 60%;
animation-delay: 0.15s;
}
.sds-loader-signal > *:nth-child(3) {
height: 85%;
animation-delay: 0.3s;
}
.sds-loader-signal > *:nth-child(4) {
height: 100%;
animation-delay: 0.45s;
}
@keyframes sds-loaderSignal {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
/* 82 · Bounce ----------------------------------------- */
.sds-loader-bounce {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderBounce var(--sds-duration-base, 0.8s) var(--sds-ease-emphasized, cubic-bezier(0.215, 0.61, 0.355, 1)) infinite;
}
@keyframes sds-loaderBounce {
0%,
100% {
transform: translateY(0) scaleY(1) scaleX(1);
}
20% {
transform: translateY(-22px) scaleY(1.08) scaleX(0.94);
}
80% {
transform: translateY(0) scaleY(0.72) scaleX(1.28);
}
90% {
transform: translateY(0) scaleY(1.04) scaleX(0.97);
}
}
/* 83 · Radar ------------------------------------------ */
.sds-loader-radar {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(0, 21, 209, 0.2);
overflow: hidden;
}
.sds-loader-radar::before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--sds-primary));
top: 50%;
left: 50%;
transform-origin: left center;
animation: sds-cometSpin 2s linear infinite;
}
.sds-loader-radar::after {
content: "";
position: absolute;
inset: 30%;
border-radius: 50%;
background: var(--sds-primary);
}
/* 84 · Morph ------------------------------------------ */
.sds-loader-morph {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--sds-primary), var(--sds-accent));
animation: sds-loaderMorph var(--sds-duration-slower, 2.2s) ease-in-out infinite;
}
@keyframes sds-loaderMorph {
0%,
100% {
border-radius: 50%;
transform: rotate(0deg) scale(1);
}
25% {
border-radius: 20% 80% 80% 20% / 20% 20% 80% 80%;
transform: rotate(90deg) scale(1.1);
}
50% {
border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
transform: rotate(180deg) scale(0.9);
}
75% {
border-radius: 80% 20% 20% 80% / 80% 20% 80% 20%;
transform: rotate(270deg) scale(1.05);
}
}
/* 85 · Cascade Bars ------------------------------------ */
.sds-loader-cascade {
display: inline-flex;
align-items: flex-end;
gap: 4px;
height: 36px;
}
.sds-loader-cascade > * {
width: 6px;
border-radius: 3px;
background: var(--sds-primary);
animation: sds-loaderCascade 1s ease infinite;
}
.sds-loader-cascade > *:nth-child(1) {
animation-delay: 0s;
}
.sds-loader-cascade > *:nth-child(2) {
animation-delay: 0.1s;
}
.sds-loader-cascade > *:nth-child(3) {
animation-delay: 0.2s;
}
.sds-loader-cascade > *:nth-child(4) {
animation-delay: 0.3s;
}
.sds-loader-cascade > *:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes sds-loaderCascade {
0%,
100% {
height: 8px;
opacity: 0.4;
}
50% {
height: 36px;
opacity: 1;
}
}
/* 86 · Dot Grid --------------------------------------- */
.sds-loader-grid {
display: grid;
grid-template-columns: repeat(3, 10px);
gap: 5px;
}
.sds-loader-grid > * {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderGrid 1.6s ease-in-out infinite;
}
.sds-loader-grid > *:nth-child(1) {
animation-delay: 0s;
}
.sds-loader-grid > *:nth-child(2) {
animation-delay: 0.1s;
}
.sds-loader-grid > *:nth-child(3) {
animation-delay: 0.2s;
}
.sds-loader-grid > *:nth-child(4) {
animation-delay: 0.3s;
}
.sds-loader-grid > *:nth-child(5) {
animation-delay: 0.4s;
}
.sds-loader-grid > *:nth-child(6) {
animation-delay: 0.5s;
}
.sds-loader-grid > *:nth-child(7) {
animation-delay: 0.6s;
}
.sds-loader-grid > *:nth-child(8) {
animation-delay: 0.7s;
}
.sds-loader-grid > *:nth-child(9) {
animation-delay: 0.8s;
}
@keyframes sds-loaderGrid {
0%,
100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(0.2);
opacity: 0.1;
}
}
/* 87 · Ring System ------------------------------------ */
.sds-loader-ring {
position: relative;
width: 44px;
height: 44px;
}
.sds-loader-ring::before,
.sds-loader-ring::after {
content: "";
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
}
.sds-loader-ring::before {
inset: 0;
border-top-color: var(--sds-primary);
animation: sds-cometSpin 1s linear infinite;
}
.sds-loader-ring::after {
inset: 8px;
border-bottom-color: var(--sds-accent);
animation: sds-cometSpin 1.6s linear infinite reverse;
}
/* 88 · Ripple Rings ----------------------------------- */
.sds-loader-ripple {
position: relative;
width: 44px;
height: 44px;
}
.sds-loader-ripple::before,
.sds-loader-ripple::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--sds-primary);
animation: sds-loaderRipple 2s ease-out infinite;
}
.sds-loader-ripple::after {
animation-delay: 0.8s;
}
@keyframes sds-loaderRipple {
0% {
transform: scale(0.2);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* 89 · Neon Ring -------------------------------------- */
.sds-loader-neon-ring {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--sds-primary);
animation:
sds-cometSpin 1s linear infinite,
sds-loaderNeonRing 2s ease-in-out infinite;
}
@keyframes sds-loaderNeonRing {
0%,
100% {
box-shadow:
0 0 8px var(--sds-primary-glow),
inset 0 0 8px var(--sds-primary-dim);
}
50% {
box-shadow:
0 0 20px var(--sds-primary-glow),
inset 0 0 16px var(--sds-primary-dim);
}
}
/* 90 · Triple Orbit ----------------------------------- */
.sds-loader-orbit-3 {
position: relative;
width: 44px;
height: 44px;
}
.sds-loader-orbit-3::before,
.sds-loader-orbit-3::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
top: 50%;
left: 50%;
margin: -3.5px 0 0 -3.5px;
}
.sds-loader-orbit-3::before {
background: var(--sds-primary);
animation: sds-orbitalA 1s linear infinite;
}
.sds-loader-orbit-3::after {
background: var(--sds-accent);
animation: sds-orbitalB var(--sds-duration-slow, 1.4s) linear infinite;
}
/* 91 · Electric Arc ----------------------------------- */
.sds-loader-electric {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(0, 21, 209, 0.15);
animation: sds-loaderElectric 1.5s ease infinite;
}
@keyframes sds-loaderElectric {
0%,
100% {
box-shadow: 0 0 0 rgba(0, 21, 209, 0);
border-color: rgba(0, 21, 209, 0.15);
}
10% {
box-shadow: 0 0 12px var(--sds-primary-glow);
border-color: var(--sds-primary);
}
12% {
box-shadow: 0 0 2px rgba(0, 21, 209, 0.1);
border-color: rgba(0, 21, 209, 0.15);
}
30% {
box-shadow: 0 0 8px var(--sds-primary-glow);
border-color: rgba(0, 21, 209, 0.5);
}
32% {
box-shadow: none;
border-color: rgba(0, 21, 209, 0.15);
}
}
/* 92 · Expand ----------------------------------------- */
.sds-loader-expand {
width: 12px;
height: 12px;
background: var(--sds-primary);
animation: sds-loaderExpand 1.6s ease-in-out infinite;
}
@keyframes sds-loaderExpand {
0%,
100% {
transform: scale(1);
border-radius: 4px;
}
50% {
transform: scale(2.5);
border-radius: 50%;
opacity: 0.5;
}
}
/* 93 · Prism ------------------------------------------ */
.sds-loader-prism {
width: 36px;
height: 36px;
background: conic-gradient(
var(--sds-primary),
#8b5cf6,
var(--sds-accent),
#06b6d4,
#10b981,
var(--sds-primary)
);
border-radius: 50%;
animation: sds-cometSpin 2s linear infinite;
}
/* 94 · Neural ----------------------------------------- */
.sds-loader-neural {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(0, 21, 209, 0.2);
animation: sds-loaderNeural var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-loaderNeural {
0%,
100% {
box-shadow:
0 0 0 0 rgba(0, 21, 209, 0.15),
0 0 0 0 rgba(0, 21, 209, 0.05);
}
33% {
box-shadow:
0 0 0 6px rgba(0, 21, 209, 0.1),
0 0 0 12px rgba(0, 21, 209, 0.03);
}
66% {
box-shadow:
0 0 0 10px rgba(0, 21, 209, 0.06),
0 0 0 20px rgba(0, 21, 209, 0.02);
}
}
/* 95 · Breath ----------------------------------------- */
.sds-loader-breath {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderBreath 2s ease-in-out infinite;
}
@keyframes sds-loaderBreath {
0%,
100% {
transform: scale(0.7);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
/* 96 · Pendulum --------------------------------------- */
.sds-loader-pendulum {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderPendulum 1.2s ease-in-out infinite;
transform-origin: center -18px;
}
@keyframes sds-loaderPendulum {
0%,
100% {
transform: rotate(-28deg);
}
50% {
transform: rotate(28deg);
}
}
/* 97 · Cube ------------------------------------------- */
.sds-loader-cube {
width: 28px;
height: 28px;
background: var(--sds-primary);
animation: sds-loaderCube 2s ease-in-out infinite;
}
@keyframes sds-loaderCube {
0% {
transform: perspective(200px) rotateX(0deg) rotateY(0deg);
border-radius: 4px;
}
25% {
transform: perspective(200px) rotateX(90deg) rotateY(0deg);
border-radius: 50%;
}
50% {
transform: perspective(200px) rotateX(90deg) rotateY(90deg);
border-radius: 4px;
}
75% {
transform: perspective(200px) rotateX(0deg) rotateY(90deg);
border-radius: 50%;
}
100% {
transform: perspective(200px) rotateX(0deg) rotateY(180deg);
border-radius: 4px;
}
}
/* 98 · Solar ------------------------------------------ */
.sds-loader-solar {
position: relative;
width: 44px;
height: 44px;
}
.sds-loader-solar::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderSolar 2s ease-in-out infinite;
}
.sds-loader-solar::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px dashed rgba(0, 21, 209, 0.4);
animation: sds-cometSpin var(--sds-duration-dramatic, 3s) linear infinite;
}
@keyframes sds-loaderSolar {
0%,
100% {
box-shadow: 0 0 8px var(--sds-primary-glow);
transform: scale(1);
}
50% {
box-shadow:
0 0 20px var(--sds-primary-glow),
0 0 40px rgba(0, 21, 209, 0.1);
transform: scale(1.15);
}
}
/* 99 · Infinity --------------------------------------- */
.sds-loader-infinity {
position: relative;
width: 56px;
height: 28px;
}
.sds-loader-infinity::before,
.sds-loader-infinity::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2.5px solid var(--sds-primary);
top: 50%;
margin-top: -10px;
}
.sds-loader-infinity::before {
left: 0;
animation: sds-cometSpin 1.2s linear infinite;
border-top-color: transparent;
}
.sds-loader-infinity::after {
right: 0;
animation: sds-cometSpin 1.2s linear infinite reverse;
border-bottom-color: transparent;
}
/* 100 · Star ------------------------------------------ */
.sds-loader-star {
width: 36px;
height: 36px;
background: var(--sds-primary);
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
animation:
sds-cometSpin 2s linear infinite,
sds-loaderStar 2s ease-in-out infinite;
}
@keyframes sds-loaderStar {
0%,
100% {
opacity: 1;
transform: scale(1) rotate(0);
}
50% {
opacity: 0.6;
transform: scale(0.8) rotate(180deg);
}
}
/* 101 · Matrix Bars ----------------------------------- */
.sds-loader-matrix {
display: inline-flex;
align-items: center;
gap: 3px;
height: 36px;
}
.sds-loader-matrix > * {
width: 4px;
border-radius: 2px;
background: var(--sds-primary);
animation: sds-loaderMatrix 1.2s steps(4) infinite;
}
.sds-loader-matrix > *:nth-child(1) {
animation-delay: 0s;
}
.sds-loader-matrix > *:nth-child(2) {
animation-delay: 0.1s;
}
.sds-loader-matrix > *:nth-child(3) {
animation-delay: 0.2s;
}
.sds-loader-matrix > *:nth-child(4) {
animation-delay: 0.3s;
}
.sds-loader-matrix > *:nth-child(5) {
animation-delay: 0.4s;
}
@keyframes sds-loaderMatrix {
0% {
height: 100%;
opacity: 1;
}
25% {
height: 40%;
opacity: 0.6;
}
50% {
height: 80%;
opacity: 0.9;
}
75% {
height: 20%;
opacity: 0.3;
}
100% {
height: 100%;
opacity: 1;
}
}
/* 102 · Snake ----------------------------------------- */
.sds-loader-snake {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--sds-primary-dim);
}
.sds-loader-snake::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--sds-primary);
border-right-color: var(--sds-primary);
animation: sds-cometSpin 1.2s var(--sds-ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)) infinite;
}
/* 103 · Glitch ---------------------------------------- */
.sds-loader-glitch {
width: 36px;
height: 36px;
background: var(--sds-primary);
border-radius: 4px;
animation: sds-loaderGlitch 2s steps(1) infinite;
}
@keyframes sds-loaderGlitch {
0%,
100% {
transform: none;
opacity: 1;
filter: none;
}
8% {
transform: translate(3px, -2px) scaleX(1.1);
filter: hue-rotate(60deg);
}
9% {
transform: none;
filter: none;
}
40% {
transform: translate(-2px, 1px);
opacity: 0.7;
}
41% {
transform: none;
opacity: 1;
}
75% {
transform: scaleY(1.2) scaleX(0.9);
}
76% {
transform: none;
}
}
/* 104 · Warp ------------------------------------------ */
.sds-loader-warp {
width: 44px;
height: 44px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--sds-primary),
var(--sds-primary-dim),
var(--sds-primary)
);
animation:
sds-cometSpin 1.2s linear infinite,
sds-loaderWarp 2s ease-in-out infinite;
}
@keyframes sds-loaderWarp {
0%,
100% {
transform: scale(1) rotate(0);
}
50% {
transform: scale(0.7) rotate(180deg);
}
}
/* 105 · Hex ------------------------------------------- */
.sds-loader-hex {
width: 36px;
height: 36px;
background: var(--sds-primary);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
animation:
sds-cometSpin 2s linear infinite,
sds-loaderHex 2s ease-in-out infinite;
}
@keyframes sds-loaderHex {
0%,
100% {
opacity: 1;
filter: brightness(1);
}
50% {
opacity: 0.6;
filter: brightness(1.4);
}
}
/* 106 · Quantum --------------------------------------- */
.sds-loader-quantum {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderQuantum 1.6s steps(1) infinite;
}
@keyframes sds-loaderQuantum {
0%,
100% {
opacity: 1;
transform: scale(1);
}
10% {
opacity: 0;
transform: scale(0.5);
}
20% {
opacity: 1;
transform: scale(1.2);
}
30% {
opacity: 0.5;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0;
transform: scale(1.4);
}
60% {
opacity: 1;
transform: scale(1);
}
}
/* 107 · Liquid Ring ----------------------------------- */
.sds-loader-liquid-ring {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--sds-primary);
border-bottom-color: var(--sds-accent);
animation:
sds-cometSpin 1s linear infinite,
sds-loaderLiquidRing var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-loaderLiquidRing {
0%,
100% {
filter: blur(0);
}
50% {
filter: blur(1px) brightness(1.3);
}
}
/* 108 · Hourglass ------------------------------------- */
.sds-loader-hourglass {
width: 20px;
height: 36px;
background: var(--sds-primary);
clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%, 40% 50%);
animation: sds-loaderHourglass 1.8s ease-in-out infinite;
}
@keyframes sds-loaderHourglass {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
}
/* 109 · Crystal --------------------------------------- */
.sds-loader-crystal {
width: 32px;
height: 32px;
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.6),
var(--sds-primary),
rgba(139, 92, 246, 0.6)
);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
animation:
sds-cometSpin var(--sds-duration-dramatic, 3s) linear infinite,
sds-loaderCrystal var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}
@keyframes sds-loaderCrystal {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.5) saturate(1.4);
}
}
/* 110 · Plasma Ring ----------------------------------- */
.sds-loader-plasma-ring {
width: 40px;
height: 40px;
border-radius: 50%;
animation:
sds-cometSpin 1.6s linear infinite,
sds-loaderPlasmaRing 2.4s ease-in-out infinite;
border: 2px solid var(--sds-primary);
}
@keyframes sds-loaderPlasmaRing {
0%,
100% {
box-shadow:
0 0 8px var(--sds-primary-glow),
inset 0 0 8px var(--sds-primary-dim);
filter: hue-rotate(0deg);
}
33% {
box-shadow:
0 0 16px rgba(139, 92, 246, 0.4),
inset 0 0 12px rgba(139, 92, 246, 0.1);
filter: hue-rotate(120deg);
}
66% {
box-shadow:
0 0 12px rgba(209, 0, 40, 0.3),
inset 0 0 8px rgba(209, 0, 40, 0.08);
filter: hue-rotate(240deg);
}
}
/* 111 · Helix Dots ------------------------------------ */
.sds-loader-helix {
display: inline-flex;
align-items: center;
gap: 4px;
height: 36px;
}
.sds-loader-helix > * {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderHelix 1.2s ease-in-out infinite;
}
.sds-loader-helix > *:nth-child(1) {
animation-delay: 0s;
}
.sds-loader-helix > *:nth-child(2) {
animation-delay: 0.12s;
background: color-mix(in srgb, var(--sds-primary) 70%, var(--sds-accent));
}
.sds-loader-helix > *:nth-child(3) {
animation-delay: 0.24s;
}
.sds-loader-helix > *:nth-child(4) {
animation-delay: 0.36s;
background: color-mix(in srgb, var(--sds-primary) 70%, var(--sds-accent));
}
.sds-loader-helix > *:nth-child(5) {
animation-delay: 0.48s;
}
@keyframes sds-loaderHelix {
0%,
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
50% {
transform: translateY(-16px) scale(0.7);
opacity: 0.5;
}
}
/* 112 · Clock ----------------------------------------- */
.sds-loader-clock {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(0, 21, 209, 0.25);
}
.sds-loader-clock::before {
content: "";
position: absolute;
width: 2px;
height: 40%;
background: var(--sds-primary);
top: 10%;
left: calc(50% - 1px);
transform-origin: bottom center;
animation: sds-cometSpin 2s linear infinite;
}
.sds-loader-clock::after {
content: "";
position: absolute;
width: 2px;
height: 30%;
background: var(--sds-accent);
top: 20%;
left: calc(50% - 1px);
transform-origin: bottom center;
animation: sds-cometSpin 24s linear infinite;
}
/* 113 · Mosaic ---------------------------------------- */
.sds-loader-mosaic {
display: grid;
grid-template-columns: repeat(3, 12px);
gap: 3px;
}
.sds-loader-mosaic > * {
width: 12px;
height: 12px;
border-radius: 2px;
background: var(--sds-primary);
animation: sds-loaderMosaic 1.8s ease-in-out infinite;
}
.sds-loader-mosaic > *:nth-child(1) {
animation-delay: 0s;
}
.sds-loader-mosaic > *:nth-child(2) {
animation-delay: 0.1s;
}
.sds-loader-mosaic > *:nth-child(3) {
animation-delay: 0.2s;
}
.sds-loader-mosaic > *:nth-child(4) {
animation-delay: 0.3s;
}
.sds-loader-mosaic > *:nth-child(5) {
animation-delay: 0.4s;
background: var(--sds-accent);
}
.sds-loader-mosaic > *:nth-child(6) {
animation-delay: 0.5s;
}
.sds-loader-mosaic > *:nth-child(7) {
animation-delay: 0.6s;
}
.sds-loader-mosaic > *:nth-child(8) {
animation-delay: 0.7s;
}
.sds-loader-mosaic > *:nth-child(9) {
animation-delay: 0.8s;
}
@keyframes sds-loaderMosaic {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0);
opacity: 0;
}
}
/* 114 · Data ------------------------------------------ */
.sds-loader-data {
width: 44px;
height: 6px;
border-radius: 3px;
background: var(--sds-primary-dim);
overflow: hidden;
position: relative;
}
.sds-loader-data::before {
content: "";
display: block;
height: 100%;
width: 40%;
border-radius: 3px;
background: var(--sds-primary);
animation: sds-loaderData var(--sds-duration-slow, 1.4s) ease-in-out infinite;
}
@keyframes sds-loaderData {
0% {
transform: translateX(-100%);
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
transform: translateX(260%);
opacity: 0.4;
}
}
/* 115 · Bar ------------------------------------------- */
.sds-loader-bar {
width: 44px;
height: 4px;
border-radius: 2px;
background: var(--sds-primary-dim);
overflow: hidden;
position: relative;
}
.sds-loader-bar::after {
content: "";
display: block;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--sds-primary), #8b5cf6);
animation: sds-loaderBar 1.8s ease-in-out infinite;
}
@keyframes sds-loaderBar {
0% {
transform: scaleX(0);
transform-origin: left;
}
45% {
transform: scaleX(1);
transform-origin: left;
}
55% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
/* 116 · Spark ----------------------------------------- */
.sds-loader-spark {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--sds-primary);
animation: sds-loaderSpark 1.8s ease-in-out infinite;
}
.sds-loader-spark::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: var(--sds-primary);
animation: sds-loaderPulse 1.8s ease-in-out infinite;
}
@keyframes sds-loaderSpark {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 rgba(0, 21, 209, 0);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 16px var(--sds-primary-glow);
}
}
.sds-loader-progress-glow {
animation: sds-progressGlow 2.4s ease infinite;
}
/* GPU compositing hints (loaders) — split from the global will-change rule; must stay after the class definitions above */
.sds-loader-vortex,
.sds-loader-fluid,
.sds-loader-morph,
.sds-loader-prism,
.sds-loader-warp,
.sds-loader-plasma-ring,
.sds-loader-orbital::before,
.sds-loader-orbital::after {
will-change: transform, opacity;
}
/* ====================================================================
BATCH 12 � Loaders: Dots & Blobs (7) + Ring & Circle (6)
==================================================================== */
/* -- Dots & Blobs -------------------------------------------------- */
/* 117 � Dots Wave � children Y-wave in sequence */
@keyframes sds-dotsWaveKf {
0%,60%,100% { transform: translateY(0px); }
30% { transform: translateY(-10px); }
}
.sds-loader-dots-wave {
display: inline-flex;
gap: 5px;
align-items: center;
}
.sds-loader-dots-wave > * {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-dotsWaveKf .9s ease-in-out infinite;
}
.sds-loader-dots-wave > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-wave > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-wave > *:nth-child(4) { animation-delay: .45s; }
/* 118 � Dots Fade � children opacity pulse in sequence */
@keyframes sds-dotsFadeKf {
0%,80%,100% { opacity: .2; }
40% { opacity: 1; }
}
.sds-loader-dots-fade {
display: inline-flex;
gap: 5px;
align-items: center;
}
.sds-loader-dots-fade > * {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-dotsFadeKf .9s ease-in-out infinite;
}
.sds-loader-dots-fade > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-fade > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-fade > *:nth-child(4) { animation-delay: .45s; }
/* 119 � Dots Flip � children rotateY flip in sequence */
@keyframes sds-dotsFlipKf {
0%,50%,100% { transform: rotateY(0deg); }
25% { transform: rotateY(180deg); }
}
.sds-loader-dots-flip {
display: inline-flex;
gap: 6px;
align-items: center;
perspective: 60px;
}
.sds-loader-dots-flip > * {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-dotsFlipKf 1.2s ease-in-out infinite;
}
.sds-loader-dots-flip > *:nth-child(2) { animation-delay: .2s; }
.sds-loader-dots-flip > *:nth-child(3) { animation-delay: .4s; }
.sds-loader-dots-flip > *:nth-child(4) { animation-delay: .6s; }
/* 120 � Dots Bounce � children Y bounce with gravity curve */
@keyframes sds-dotsBounceKf {
0%,20%,50%,80%,100% { transform: translateY(0px); }
40% { transform: translateY(-12px); }
60% { transform: translateY(-5px); }
}
.sds-loader-dots-bounce {
display: inline-flex;
gap: 5px;
align-items: flex-end;
}
.sds-loader-dots-bounce > * {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-dotsBounceKf 1.1s ease infinite;
}
.sds-loader-dots-bounce > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-bounce > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-bounce > *:nth-child(4) { animation-delay: .45s; }
/* 121 � Dots Expand � children scale 0?1?0 in sequence */
@keyframes sds-dotsExpandKf {
0%,100% { transform: scale(0); opacity: 0; }
40%,60% { transform: scale(1); opacity: 1; }
}
.sds-loader-dots-expand {
display: inline-flex;
gap: 5px;
align-items: center;
}
.sds-loader-dots-expand > * {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-dotsExpandKf 1.2s ease-in-out infinite;
}
.sds-loader-dots-expand > *:nth-child(2) { animation-delay: .2s; }
.sds-loader-dots-expand > *:nth-child(3) { animation-delay: .4s; }
.sds-loader-dots-expand > *:nth-child(4) { animation-delay: .6s; }
/* 122 � Blob � clip-path polygon morphing organic shape */
@keyframes sds-blobMorphKf {
0%,100% { clip-path: polygon(50% 5%, 93% 25%, 93% 75%, 50% 95%, 7% 75%, 7% 25%); }
33% { clip-path: polygon(28% 0%, 100% 28%, 78% 100%, 22% 100%, 0% 28%, 22% 0%); }
66% { clip-path: polygon(50% 0%, 100% 22%, 100% 78%, 50% 100%, 0% 78%, 0% 22%); }
}
.sds-loader-blob {
display: inline-block;
width: 36px; height: 36px;
background: var(--sds-primary, currentColor);
animation: sds-blobMorphKf 2.4s ease-in-out infinite;
}
/* 123 � Bubble � ring expands and pops on loop */
@keyframes sds-bubblePopKf {
0% { transform: scale(.15); opacity: .9; }
70% { transform: scale(1); opacity: .3; }
100% { transform: scale(1.3); opacity: 0; }
}
.sds-loader-bubble {
display: inline-block;
width: 28px; height: 28px;
border: 2px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-bubblePopKf 1.2s ease-out infinite;
}
/* -- Ring & Circle ------------------------------------------------- */
/* 124 � Dual Ring � concentric rings spinning opposite directions */
@keyframes sds-dualRingCW { to { transform: rotate(360deg); } }
@keyframes sds-dualRingCCW { to { transform: rotate(-360deg); } }
.sds-loader-dual-ring {
display: inline-block;
position: relative;
width: 36px; height: 36px;
border: 3px solid transparent;
border-top-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-dualRingCW .8s linear infinite;
}
.sds-loader-dual-ring::before {
content: "";
position: absolute;
inset: 4px;
border: 2px solid transparent;
border-bottom-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-dualRingCCW .6s linear infinite;
}
/* 125 � Ring Split � two opposing half-arcs counter-rotate */
@keyframes sds-ringSplitCW { to { transform: rotate(360deg); } }
@keyframes sds-ringSplitCCW { to { transform: rotate(-360deg); } }
.sds-loader-ring-split {
display: inline-block;
position: relative;
width: 36px; height: 36px;
border: 3px solid transparent;
border-top-color: var(--sds-primary, currentColor);
border-right-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ringSplitCW .9s linear infinite;
}
.sds-loader-ring-split::before {
content: "";
position: absolute;
inset: -1px;
border: 3px solid transparent;
border-bottom-color: var(--sds-primary, currentColor);
border-left-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ringSplitCCW .9s linear infinite;
}
/* 126 � Spin Dot � ring with orbiting bead via offset-path */
@keyframes sds-spinDotOrbit { to { transform: rotate(360deg); } }
@keyframes sds-spinDotBead { to { offset-distance: 100%; } }
.sds-loader-spin-dot {
display: inline-block;
position: relative;
width: 36px; height: 36px;
border: 2px solid rgba(0, 0, 0, .14);
border-radius: 50%;
animation: sds-spinDotOrbit 2.4s linear infinite;
}
.sds-loader-spin-dot::before {
content: "";
position: absolute;
width: 8px; height: 8px;
background: var(--sds-primary, currentColor);
border-radius: 50%;
offset-path: border-box;
offset-distance: 0%;
animation: sds-spinDotBead 1s linear infinite;
}
/* 127 � Ring Chase � twin beads chase each other around border-box */
@keyframes sds-ringChaseKf { to { offset-distance: 100%; } }
.sds-loader-ring-chase {
display: inline-block;
position: relative;
width: 36px; height: 36px;
border: 2px solid rgba(0, 0, 0, .1);
border-radius: 50%;
}
.sds-loader-ring-chase::before {
content: "";
position: absolute;
width: 32%; height: 3px;
background: var(--sds-primary, currentColor);
border-radius: 3px;
offset-path: border-box;
offset-distance: 0%;
animation: sds-ringChaseKf 1.2s cubic-bezier(.4,0,.6,1) infinite;
}
.sds-loader-ring-chase::after {
content: "";
position: absolute;
width: 22%; height: 3px;
background: var(--sds-primary, currentColor);
border-radius: 3px;
offset-path: border-box;
offset-distance: 48%;
animation: sds-ringChaseKf 1.2s cubic-bezier(.4,0,.6,1) infinite .35s;
}
/* 128 � Eclipse � two discs slide past each other */
@keyframes sds-eclipseKf {
0%,100% { transform: translateX(-7px); opacity: .75; }
50% { transform: translateX(7px); opacity: .9; }
}
.sds-loader-eclipse {
display: inline-block;
position: relative;
width: 40px; height: 20px;
}
.sds-loader-eclipse::before,
.sds-loader-eclipse::after {
content: "";
position: absolute;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
}
.sds-loader-eclipse::before {
left: 0;
animation: sds-eclipseKf 1.5s ease-in-out infinite;
}
.sds-loader-eclipse::after {
right: 0;
animation: sds-eclipseKf 1.5s ease-in-out infinite .75s;
}
/* 129 � Halo � two staggered expanding-fading rings */
@keyframes sds-haloExpandKf {
0% { transform: scale(.2); opacity: .85; }
100% { transform: scale(2); opacity: 0; }
}
.sds-loader-halo {
display: inline-block;
position: relative;
width: 28px; height: 28px;
border: 2px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-haloExpandKf 1.4s ease-out infinite;
}
.sds-loader-halo::before {
content: "";
position: absolute;
inset: -2px;
border: 2px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-haloExpandKf 1.4s ease-out infinite .7s;
}
/* ====================================================================
BATCH 13 � Loaders: Line & Bar (6) + Morph & Shape (6)
==================================================================== */
/* -- Line & Bar ---------------------------------------------------- */
/* 130 � Fill Bar � progress fill sweeps left?right then fades */
@keyframes sds-ldBarFill {
0% { transform: scaleX(0); opacity: 1; }
65% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
}
.sds-loader-fill-bar {
display: inline-block;
position: relative;
width: 60px; height: 6px;
border-radius: 3px;
background: rgba(0, 0, 0, .12);
overflow: hidden;
}
.sds-loader-fill-bar::before {
content: "";
position: absolute;
inset: 0;
border-radius: 3px;
background: var(--sds-primary, currentColor);
transform-origin: left;
animation: sds-ldBarFill 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* 131 � Bar Pulse � bar breathes scale on center axis */
@keyframes sds-ldBarPulse {
0%,100% { transform: scaleX(.2); opacity: .45; }
50% { transform: scaleX(1); opacity: 1; }
}
.sds-loader-bar-pulse {
display: inline-block;
width: 60px; height: 6px;
border-radius: 3px;
background: var(--sds-primary, currentColor);
transform-origin: center;
animation: sds-ldBarPulse 1.2s ease-in-out infinite;
}
/* 132 � Bar Swing � bright sliver slides end to end across track */
@keyframes sds-ldBarSwing {
0% { transform: translateX(-16px); }
100% { transform: translateX(76px); }
}
.sds-loader-bar-swing {
display: inline-block;
position: relative;
width: 60px; height: 6px;
border-radius: 3px;
background: rgba(0, 0, 0, .12);
overflow: hidden;
}
.sds-loader-bar-swing::before {
content: "";
position: absolute;
inset: 0;
width: 12px;
border-radius: 3px;
background: var(--sds-primary, currentColor);
animation: sds-ldBarSwing 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}
/* 133 � Track � dot races back and forth along a rail */
@keyframes sds-ldTrackRun {
0% { transform: translateX(0) translateY(-50%); }
100% { transform: translateX(40px) translateY(-50%); }
}
.sds-loader-track {
display: inline-block;
position: relative;
width: 56px; height: 4px;
border-radius: 4px;
background: rgba(0, 0, 0, .12);
}
.sds-loader-track::before {
content: "";
position: absolute;
top: 50%; left: 0;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldTrackRun 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}
/* 134 � Stripes � diagonal stripe pattern scrolls across bar */
@keyframes sds-ldStripes {
from { transform: translateX(0); }
to { transform: translateX(14px); }
}
.sds-loader-stripes {
display: inline-block;
position: relative;
width: 64px; height: 8px;
border-radius: 4px;
background: rgba(0, 0, 0, .1);
overflow: hidden;
}
.sds-loader-stripes::before {
content: "";
position: absolute;
inset: 0;
width: 200%;
background: repeating-linear-gradient(
-45deg,
var(--sds-primary, currentColor) 0px,
var(--sds-primary, currentColor) 5px,
transparent 5px,
transparent 14px
);
animation: sds-ldStripes .7s linear infinite;
}
/* 135 � Equalizer � 4 bars pulse to different heights (requiresChildren) */
@keyframes sds-ldEqualizerA { 0%,100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@keyframes sds-ldEqualizerB { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(.25); } }
@keyframes sds-ldEqualizerC { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(.85); } }
@keyframes sds-ldEqualizerD { 0%,100% { transform: scaleY(.9); } 50% { transform: scaleY(.3); } }
.sds-loader-equalizer {
display: inline-flex;
gap: 3px;
align-items: flex-end;
height: 24px;
}
.sds-loader-equalizer > * {
width: 5px; height: 24px;
border-radius: 2px 2px 0 0;
background: var(--sds-primary, currentColor);
transform-origin: bottom;
}
.sds-loader-equalizer > *:nth-child(1) { animation: sds-ldEqualizerA .8s ease-in-out infinite; }
.sds-loader-equalizer > *:nth-child(2) { animation: sds-ldEqualizerB .8s ease-in-out infinite .1s; }
.sds-loader-equalizer > *:nth-child(3) { animation: sds-ldEqualizerC .8s ease-in-out infinite .2s; }
.sds-loader-equalizer > *:nth-child(4) { animation: sds-ldEqualizerD .8s ease-in-out infinite .3s; }
/* -- Morph & Shape ------------------------------------------------- */
/* 136 � Morph Geo � square ? diamond ? circle via clip-path */
@keyframes sds-ldMorphGeo {
0%,100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
33% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
66% { clip-path: circle(50% at 50% 50%); }
}
.sds-loader-morph-geo {
display: inline-block;
width: 28px; height: 28px;
background: var(--sds-primary, currentColor);
animation: sds-ldMorphGeo 1.8s ease-in-out infinite;
}
/* 137 � Fold � square folds in 3D perspective on each axis in turn */
@keyframes sds-ldFold {
0%,100% { transform: perspective(60px) rotateX(0deg) rotateY(0deg); }
25% { transform: perspective(60px) rotateX(0deg) rotateY(180deg); }
50% { transform: perspective(60px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(60px) rotateX(180deg) rotateY(0deg); }
}
.sds-loader-fold {
display: inline-block;
width: 22px; height: 22px;
background: var(--sds-primary, currentColor);
animation: sds-ldFold 1.6s ease-in-out infinite;
}
/* 138 � Pinwheel � 4 petal-dots fade in sequence (requiresChildren) */
@keyframes sds-ldPinwheelFade { 0%,100% { opacity: .1; } 50% { opacity: 1; } }
.sds-loader-pinwheel {
display: inline-block;
position: relative;
width: 28px; height: 28px;
}
.sds-loader-pinwheel > * {
position: absolute;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldPinwheelFade .8s ease-in-out infinite;
}
.sds-loader-pinwheel > *:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.sds-loader-pinwheel > *:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); animation-delay: .2s; }
.sds-loader-pinwheel > *:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: .4s; }
.sds-loader-pinwheel > *:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); animation-delay: .6s; }
/* 139 � Coil � three nested arcs spinning at different speeds */
@keyframes sds-ldCoilCW { to { transform: rotate(360deg); } }
@keyframes sds-ldCoilCCW { to { transform: rotate(-360deg); } }
.sds-loader-coil {
display: inline-block;
position: relative;
width: 30px; height: 30px;
border: 3px solid transparent;
border-top-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldCoilCW .8s linear infinite;
}
.sds-loader-coil::before {
content: "";
position: absolute;
inset: 4px;
border: 2px solid transparent;
border-top-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldCoilCCW .5s linear infinite;
}
.sds-loader-coil::after {
content: "";
position: absolute;
inset: 10px;
border: 2px solid transparent;
border-top-color: var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldCoilCW .3s linear infinite;
}
/* 140 � Flip Card � rectangle flips on Y axis like turning a card */
@keyframes sds-ldFlipCard {
0% { transform: perspective(80px) rotateY(0deg); }
49% { transform: perspective(80px) rotateY(90deg); opacity: .3; }
51% { transform: perspective(80px) rotateY(-90deg); opacity: .3; }
100% { transform: perspective(80px) rotateY(0deg); }
}
.sds-loader-flip-card {
display: inline-block;
width: 22px; height: 22px;
background: var(--sds-primary, currentColor);
border-radius: 3px;
animation: sds-ldFlipCard 1.2s ease-in-out infinite;
}
/* 141 � Diamond � square rotates 180� and pulses scale */
@keyframes sds-ldDiamond {
0%,100% { transform: rotate(45deg) scale(1); opacity: 1; }
50% { transform: rotate(225deg) scale(.6); opacity: .45; }
}
.sds-loader-diamond {
display: inline-block;
width: 20px; height: 20px;
background: var(--sds-primary, currentColor);
animation: sds-ldDiamond 1.2s ease-in-out infinite;
}
/* ====================================================================
BATCH 14 � Loaders: Geometric Spinners (6) + Glow & Filter (6)
==================================================================== */
/* -- Geometric Spinners -------------------------------------------- */
/* 142 � Squares � 2�2 grid cells pop in rolling sequence (requiresChildren) */
@keyframes sds-ldSquaresKf {
0%,100% { transform: scale(0); opacity: 0; }
50% { transform: scale(1); opacity: 1; }
}
.sds-loader-squares {
display: inline-grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
width: 24px; height: 24px;
}
.sds-loader-squares > * {
background: var(--sds-primary, currentColor);
border-radius: 2px;
animation: sds-ldSquaresKf .9s ease-in-out infinite;
}
.sds-loader-squares > *:nth-child(1) { animation-delay: 0s; }
.sds-loader-squares > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-squares > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-squares > *:nth-child(4) { animation-delay: .45s; }
/* 143 � Isocube � square spins on a tilted perspective axis */
@keyframes sds-ldIsocube { to { transform: perspective(60px) rotateX(-22deg) rotateY(360deg); } }
.sds-loader-isocube {
display: inline-block;
width: 22px; height: 22px;
background: var(--sds-primary, currentColor);
animation: sds-ldIsocube 1.8s linear infinite;
}
/* 144 � Metronome � thin bar pivots left-right from its base */
@keyframes sds-ldMetronome {
0%,100% { transform: rotate(-38deg); }
50% { transform: rotate(38deg); }
}
.sds-loader-metronome {
display: inline-block;
width: 4px; height: 30px;
border-radius: 2px;
background: var(--sds-primary, currentColor);
transform-origin: bottom center;
animation: sds-ldMetronome 1s ease-in-out infinite;
}
/* 145 � Tape � ball squashes and stretches on each bounce */
@keyframes sds-ldTape {
0%,100% { transform: translateY(-10px) scaleX(.8) scaleY(1.25); }
40% { transform: translateY(4px) scaleX(1.25) scaleY(.75); }
60% { transform: translateY(-6px) scaleX(.9) scaleY(1.1); }
}
.sds-loader-tape {
display: inline-block;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldTape .85s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* 146 � Chase Box � bead races along host border via offset-path */
@keyframes sds-ldChaseBox { to { offset-distance: 100%; } }
.sds-loader-chase-box {
display: inline-block;
position: relative;
width: 32px; height: 32px;
border: 2px solid rgba(0, 0, 0, .1);
border-radius: 4px;
}
.sds-loader-chase-box::before {
content: "";
position: absolute;
width: 8px; height: 8px;
background: var(--sds-primary, currentColor);
border-radius: 2px;
offset-path: border-box;
offset-distance: 0%;
animation: sds-ldChaseBox 1.2s linear infinite;
}
/* 147 � Windmill � 4 rectangular blades fade in cardinal sequence (requiresChildren) */
@keyframes sds-ldWindmillFade { 0%,100% { opacity: .08; } 50% { opacity: 1; } }
.sds-loader-windmill {
display: inline-block;
position: relative;
width: 28px; height: 28px;
}
.sds-loader-windmill > * {
position: absolute;
top: 50%; left: 50%;
width: 10px; height: 4px;
border-radius: 2px;
background: var(--sds-primary, currentColor);
animation: sds-ldWindmillFade 1s ease-in-out infinite;
}
.sds-loader-windmill > *:nth-child(1) { transform: translate(-50%, -14px) rotate(0deg); animation-delay: 0s; }
.sds-loader-windmill > *:nth-child(2) { transform: translate(4px, -50%) rotate(90deg); animation-delay: .25s; }
.sds-loader-windmill > *:nth-child(3) { transform: translate(-50%, 10px) rotate(0deg); animation-delay: .5s; }
.sds-loader-windmill > *:nth-child(4) { transform: translate(-14px, -50%) rotate(90deg); animation-delay: .75s; }
/* -- Glow & Filter ------------------------------------------------- */
/* 148 � Glow Pulse � dot radiates a breathing drop-shadow glow */
@keyframes sds-ldGlowPulse {
0%,100% { filter: drop-shadow(0 0 2px currentColor); transform: scale(.88); opacity: .65; }
50% { filter: drop-shadow(0 0 14px currentColor); transform: scale(1.1); opacity: 1; }
}
.sds-loader-glow-pulse {
display: inline-block;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldGlowPulse 1.5s ease-in-out infinite;
}
/* 149 � Neon Flicker � bar sputters like a neon tube warming up */
@keyframes sds-ldNeonFlicker {
0%,18%,22%,55%,57%,100% { opacity: 1; filter: drop-shadow(0 0 8px currentColor); }
20%,56% { opacity: .12; filter: none; }
}
.sds-loader-neon-flicker {
display: inline-block;
width: 4px; height: 28px;
border-radius: 2px;
background: var(--sds-primary, currentColor);
animation: sds-ldNeonFlicker 2.4s ease-in-out infinite;
}
/* 150 � Scanner � horizontal scan line sweeps down a bordered box */
@keyframes sds-ldScanner {
0% { transform: translateY(0); opacity: 1; }
90% { transform: translateY(36px); opacity: .3; }
100% { transform: translateY(0); opacity: 0; }
}
.sds-loader-scanner {
display: inline-block;
position: relative;
width: 36px; height: 36px;
border: 2px solid rgba(0, 0, 0, .12);
border-radius: 3px;
overflow: hidden;
}
.sds-loader-scanner::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
border-radius: 1px;
background: var(--sds-primary, currentColor);
filter: drop-shadow(0 2px 4px currentColor);
animation: sds-ldScanner 1.6s ease-in-out infinite;
}
/* 151 � Spotlight � conic wedge sweeps in a circle like a spotlight */
@keyframes sds-ldSpotlight { to { transform: rotate(360deg); } }
.sds-loader-spotlight {
display: inline-block;
position: relative;
width: 32px; height: 32px;
border-radius: 50%;
overflow: hidden;
background: rgba(0, 0, 0, .07);
}
.sds-loader-spotlight::before {
content: "";
position: absolute;
inset: 0;
background: conic-gradient(
from 0deg,
transparent 0deg,
transparent 255deg,
var(--sds-primary, currentColor) 272deg,
transparent 289deg
);
animation: sds-ldSpotlight 1.2s linear infinite;
}
/* 152 � Beam � bar wipes in from left then exits right via clip-path */
@keyframes sds-ldBeam {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 0; }
}
.sds-loader-beam {
display: inline-block;
width: 44px; height: 3px;
border-radius: 2px;
background: var(--sds-primary, currentColor);
filter: drop-shadow(0 0 4px currentColor);
animation: sds-ldBeam 1.4s ease-in-out infinite;
}
/* 153 � Blur Pulse � dot dissolves in and out through a blur */
@keyframes sds-ldBlurPulse {
0%,100% { filter: blur(7px); transform: scale(1.5); opacity: 0; }
50% { filter: blur(0px); transform: scale(1); opacity: 1; }
}
.sds-loader-blur-pulse {
display: inline-block;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldBlurPulse 1.6s ease-in-out infinite;
}
/* ====================================================================
BATCH 15 � Loaders: Finale mix (12) � loaders complete at 100/100
==================================================================== */
/* 154 � Timer � pie-fill sweeps around like a countdown clock */
@keyframes sds-ldTimerKf {
0% { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
25% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%); }
50% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%); }
75% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); }
100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); }
}
.sds-loader-timer {
display: inline-block;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldTimerKf 1.8s linear infinite;
}
/* 155 � Cursor � hard-blinking I-beam using step-end */
@keyframes sds-ldCursor {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
.sds-loader-cursor {
display: inline-block;
width: 2px; height: 22px;
border-radius: 1px;
background: var(--sds-primary, currentColor);
animation: sds-ldCursor .9s step-end infinite;
}
/* 156 � Bounce Bar � 4 bars translate-Y bounce in sequence (requiresChildren) */
@keyframes sds-ldBounceBar {
0%,100% { transform: translateY(0); }
40% { transform: translateY(-14px); }
60% { transform: translateY(-5px); }
}
.sds-loader-bounce-bar {
display: inline-flex;
gap: 3px;
align-items: flex-end;
height: 24px;
}
.sds-loader-bounce-bar > * {
width: 5px; height: 16px;
border-radius: 2px 2px 0 0;
background: var(--sds-primary, currentColor);
}
.sds-loader-bounce-bar > *:nth-child(1) { animation: sds-ldBounceBar .8s ease-in-out infinite; }
.sds-loader-bounce-bar > *:nth-child(2) { animation: sds-ldBounceBar .8s ease-in-out infinite .13s; }
.sds-loader-bounce-bar > *:nth-child(3) { animation: sds-ldBounceBar .8s ease-in-out infinite .26s; }
.sds-loader-bounce-bar > *:nth-child(4) { animation: sds-ldBounceBar .8s ease-in-out infinite .39s; }
/* 157 � Ripple Dot � central dot radiates two expanding ring waves */
@keyframes sds-ldRippleDotRing {
0% { transform: scale(1); opacity: .7; }
100% { transform: scale(3.2); opacity: 0; }
}
.sds-loader-ripple-dot {
display: inline-block;
position: relative;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
}
.sds-loader-ripple-dot::before,
.sds-loader-ripple-dot::after {
content: "";
position: absolute;
inset: 0;
border: 1.5px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldRippleDotRing 1.6s ease-out infinite;
}
.sds-loader-ripple-dot::after { animation-delay: .8s; }
/* 158 � Yo-Yo � ball drops, mini-bounces at bottom, snaps back */
@keyframes sds-ldYoYo {
0%,100% { transform: translateY(-14px); }
40% { transform: translateY(4px); }
55% { transform: translateY(-4px); }
70% { transform: translateY(2px); }
}
.sds-loader-yo-yo {
display: inline-block;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldYoYo 1s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* 159 � Swivel � dot oscillates side to side with alternate timing */
@keyframes sds-ldSwivel {
0%,100% { transform: translateX(-14px) scaleY(.85); }
50% { transform: translateX(14px) scaleY(1.15); }
}
.sds-loader-swivel {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldSwivel 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}
/* 160 � Gear � jagged polygon rotates like a mechanical cog */
@keyframes sds-ldGearSpin { to { transform: rotate(360deg); } }
.sds-loader-gear {
display: inline-block;
width: 28px; height: 28px;
background: var(--sds-primary, currentColor);
clip-path: polygon(
50% 0%, 63% 11%, 79% 7%, 83% 23%,
98% 32%, 93% 48%, 100% 62%, 87% 71%,
88% 88%, 71% 89%, 62% 100%, 47% 93%,
31% 98%, 26% 82%, 10% 76%, 15% 60%,
3% 47%, 16% 37%, 13% 20%, 30% 18%, 37% 3%
);
animation: sds-ldGearSpin 2s linear infinite;
}
/* 161 � Drop � teardrop shape squashes on impact and lifts off */
@keyframes sds-ldDropKf {
0%,100% { transform: translateY(-8px) scaleX(1) scaleY(1.25); }
60% { transform: translateY(5px) scaleX(1.35) scaleY(.7); }
75% { transform: translateY(2px) scaleX(.9) scaleY(1.1); }
88% { transform: translateY(4px) scaleX(1.1) scaleY(.95); }
}
.sds-loader-drop {
display: inline-block;
width: 16px; height: 20px;
background: var(--sds-primary, currentColor);
clip-path: polygon(50% 0%, 100% 55%, 80% 100%, 20% 100%, 0% 55%);
animation: sds-ldDropKf 1.1s ease-in infinite;
}
/* 162 � Ticker � rectangle flips on X axis like a flip-board tile */
@keyframes sds-ldTickerFlip {
0% { transform: perspective(50px) rotateX(0deg); opacity: 1; }
44% { transform: perspective(50px) rotateX(-90deg); opacity: 0; }
56% { transform: perspective(50px) rotateX(90deg); opacity: 0; }
100% { transform: perspective(50px) rotateX(0deg); opacity: 1; }
}
.sds-loader-ticker {
display: inline-block;
width: 22px; height: 16px;
border-radius: 3px;
background: var(--sds-primary, currentColor);
animation: sds-ldTickerFlip 1.2s ease-in-out infinite;
}
/* 163 � Expand Ring � three concentric rings radiate outward */
@keyframes sds-ldExpandRingKf {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(2.8); opacity: 0; }
}
.sds-loader-expand-ring {
display: inline-block;
position: relative;
width: 16px; height: 16px;
border: 2px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldExpandRingKf 1.6s ease-out infinite;
}
.sds-loader-expand-ring::before,
.sds-loader-expand-ring::after {
content: "";
position: absolute;
inset: -2px;
border: 2px solid var(--sds-primary, currentColor);
border-radius: 50%;
animation: sds-ldExpandRingKf 1.6s ease-out infinite;
}
.sds-loader-expand-ring::before { animation-delay: .5s; }
.sds-loader-expand-ring::after { animation-delay: 1s; }
/* 164 � Spin Fade � 4 horizontal bars fade in rotational sequence (requiresChildren) */
@keyframes sds-ldSpinFadeKf { 0%,100% { opacity: .08; } 50% { opacity: 1; } }
.sds-loader-spin-fade {
display: inline-block;
position: relative;
width: 28px; height: 28px;
}
.sds-loader-spin-fade > * {
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 3px;
border-radius: 3px;
background: var(--sds-primary, currentColor);
animation: sds-ldSpinFadeKf 1s ease-in-out infinite;
}
.sds-loader-spin-fade > *:nth-child(1) { transform: translate(-50%, -11px) rotate(0deg); animation-delay: 0s; }
.sds-loader-spin-fade > *:nth-child(2) { transform: translate(1px, -50%) rotate(90deg); animation-delay: .25s; }
.sds-loader-spin-fade > *:nth-child(3) { transform: translate(-50%, 8px) rotate(0deg); animation-delay: .5s; }
.sds-loader-spin-fade > *:nth-child(4) { transform: translate(-13px, -50%) rotate(90deg); animation-delay: .75s; }
/* 165 � Throb � energetic overshoot pulse, more forceful than breath */
@keyframes sds-ldThrob {
0%,100% { transform: scale(1); opacity: .8; }
40% { transform: scale(1.45); opacity: 1; }
60% { transform: scale(.88); opacity: .9; }
}
.sds-loader-throb {
display: inline-block;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--sds-primary, currentColor);
animation: sds-ldThrob 1.1s ease-in-out infinite;
}
/* ── Cross-category keyframe dependencies ── */
/* dependency: @keyframes sds-typewriterPrem (defined in text.css) */
@keyframes sds-typewriterPrem {
from {
width: 0;
}
to {
width: 100%;
}
}
/* dependency: @keyframes sds-cursorBlink (defined in text.css) */
@keyframes sds-cursorBlink {
0%,
100% {
border-color: var(--sds-primary);
}
50% {
border-color: transparent;
}
}