Five preloaders in one component, pure SVG and CSS. No dependency, no external request, a few kilobytes. Pick a variant in the sidebar: Trace draws any SVG path you paste in - your own logo, stroke by stroke. Ring is a clean progress arc. Bars is a staggered wave. Halftone grows a dot pattern until the screen fills. Morph cycles a shape from triangle to square to hexagon. Two progress modes that matter: a fixed duration for a controlled intro, or real page load - and in that mode the bar honestly caps at 92 percent until the page is actually ready, instead of lying its way to 100. Set a minimum duration so a fast connection does not produce an ugly flash. Three exits: fade, slide up, or a closing circle. Full screen overlay or inline in its own frame. Colours, thickness, size, label and percentage readout are all exposed. Respects prefers-reduced-motion and renders a still frame inside the Framer editor, so your canvas stays fast.
Five preloaders in one component, pure SVG and CSS. No dependency, no external request, a few kilobytes. Pick a variant in the sidebar: Trace draws any SVG path you paste in - your own logo, stroke by stroke. Ring is a clean progress arc. Bars is a staggered wave. Halftone grows a dot pattern until the screen fills. Morph cycles a shape from triangle to square to hexagon. Two progress modes that matter: a fixed duration for a controlled intro, or real page load - and in that mode the bar honestly caps at 92 percent until the page is actually ready, instead of lying its way to 100. Set a minimum duration so a fast connection does not produce an ugly flash. Three exits: fade, slide up, or a closing circle. Full screen overlay or inline in its own frame. Colours, thickness, size, label and percentage readout are all exposed. Respects prefers-reduced-motion and renders a still frame inside the Framer editor, so your canvas stays fast.
