Component theme

Loaders

14 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• Morphing BlobAurora-gradient blob slowly morphs border-radius and rotates, with an inset dark ghost layer counter-rotating. Soft glow on dark backdrop.
• DNA HelixTwo columns of 10 glowing dots swing left-right in opposite phases, tracing a rotating DNA double helix. Cycling status messages fade in below.
• Skeleton ShimmerDark content-placeholder card with avatar circle and staggered text bars swept by a looping gold-to-tan shimmer gradient. Pure CSS, no JS logic.
• Particle Orbit18 glowing iris, cyan, and magenta particles orbit a white core on wobbling elliptical paths; trailing fill creates a comet-like motion blur effect.
• Concentric PulseFour concentric rings ripple outward in staggered teal, tan, and slate waves from a beating gradient core dot on a dark background.
• Equalizer BarsSeven pill-shaped vermillion-to-tan gradient bars bounce at staggered offsets, mimicking an audio equalizer. Pure CSS scaleY animation.
• Conic ProgressA circular conic-gradient ring fills from 0–100% with a lime arc and a blurred gold glow layer; a live numeric counter updates in sync.
• Typewriter LoaderTerminal card with traffic-light dots cycles through status phrases typing and erasing character-by-character after a $ prompt with a blinking emerald caret.
• Fluid MetaballsThree glowing blobs (cyan, purple, pink) merge and divide through an SVG feColorMatrix gooey filter on a near-black background.
• Boiling Coffee PotSVG coffee machine: liquid fills and drains in an 8s cycle, a drip falls from the spout, and two steam wisps animate on curved paths above.
• Fruit OrangeSVG orange cross-section: 8 wedge segments pulse amber-to-orange in a sequential wave while the whole slice rotates slowly on an 8s spin.
• Newton's CradleFive pendulum wires hang from a gold bar; the leftmost (magenta) and rightmost (mauve) balls swing alternately with a 0.6s phase offset, simulating…
• Infinity LoopTwo glowing traces (pink and cyan) chase each other around a lemniscate path using stroke-dashoffset animation; a near-invisible track marks the full path…
• Fruit WatermelonA CSS watermelon slice (pink semicircle with green rind, white border) bounces gently while three black seeds fall and fade in staggered loops.