∞ forever components

Loaders

Typewriter Loader

Terminal card with traffic-light dots cycles through status phrases typing and erasing character-by-character after a $ prompt with a blinking emerald caret.

csslight complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Loading screens, build/compile progress indicators, developer-tool or CLI-themed UIs needing ambient status text.

When not to

Non-technical or consumer-facing contexts where terminal aesthetics feel out of place. Avoid when progress must map to real state.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the status phrases in the frames array to ['building assets...','minifying...','done!'], set TYPE speed to 40ms, and change accent-cyan to #00ff99. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • status phrases (frames array)
  • type/erase speed (TYPE=55, ERASE=30)
  • hold durations (HOLD_FULL=1100, HOLD_EMPTY=280)
  • accent colors (--accent-cyan, --accent-iris, --accent-magenta)
  • card width (min(74vmin,260px))
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (static first frame fallback)
  • visibilitychange stop/play handlers
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Purely decorative — not wired to real async state; remove loop and drive fi/ci externally for production use
  • Card width capped at 260px; long phrases may wrap unexpectedly

typewriterterminalloadertext-animationcssmonospacestatus

More Loaders components

  • 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.