About

A loading screen bridges the gap between user action and system response. Perceived wait time drops by up to 40% when a meaningful animation is present versus a blank page. This generator produces fully self-contained HTML files with zero external dependencies. Each output includes inline CSS keyframe animations and vanilla JavaScript for progress simulation. The generated code weighs under 5KB uncompressed. It renders without a server, framework, or build step.

Misconfigured loading screens cause measurable bounce rate increases. A spinner with no text gives no context. A progress bar that jumps from 0 to 100 feels dishonest. This tool lets you control animation type, speed factor s, text content, and color scheme. The preview renders in real time on a Canvas element running at 60fps. The exported HTML uses pure CSS animations for production reliability. Note: progress bars in the output simulate advancement. Actual progress tracking requires integration with your application's data loading logic.

Formulas

The spinner geometry relies on polar-to-Cartesian coordinate conversion. Each point on a circular spinner at angle θ and radius r maps to screen coordinates:

x = cx + r ⋅ cos(θ)

y = cy + r ⋅ sin(θ)

where cx, cy represent the center of the canvas, and θ advances per frame by:

Δθ = 2πT ⋅ dt

where T = period in milliseconds controlled by the speed factor s, and dt = elapsed time since last frame. For pulsing dot animations, opacity α of the i-th dot follows:

α_i = 0.3 + 0.7 ⋅ sin²(θ − i ⋅ 2πn)

where n = total number of dots. The progress bar simulated advancement uses an eased curve: p(t) = 1 − e^−kt, where k controls how quickly the bar approaches 100% without ever quite reaching it, mimicking real network loading behavior.

Reference Data

Animation Type	Best For	Perceived Speed	CPU Impact	Mobile Safe
Spinning Circle	General purpose, API calls	Medium	Low	Yes
Pulsing Dots	Chat apps, messaging	Fast	Low	Yes
Progress Bar	File uploads, installations	Slow (honest)	Minimal	Yes
Bouncing Balls	Playful/casual apps	Fast	Medium	Yes
Rotating Squares	Dashboard/enterprise	Medium	Low	Yes
Wave Bars	Audio/music apps	Fast	Low	Yes
Fading Ring	Minimal/elegant UIs	Slow	Low	Yes
Orbit Dots	Science/tech apps	Medium	Medium	Yes
Morphing Shape	Creative/design tools	Fast	Medium	Yes
Typing Dots	Chat loading indicators	Fast	Minimal	Yes
Skeleton Screen	Content-heavy pages	Fastest	Minimal	Yes
Dual Ring	Form submissions	Medium	Low	Yes
Clock Spinner	Time-related apps	Slow	Low	Yes
Gradient Sweep	Modern SaaS	Fast	Low	Yes
DNA Helix	Biotech/health apps	Medium	Medium	Yes

Frequently Asked Questions

The exported HTML file is self-contained. Extract the and blocks and paste them into your project. Wrap the loading screen markup in a container div. Toggle its visibility with display:none when your content finishes loading. Use your framework's lifecycle hooks (DOMContentLoaded, React useEffect, Vue onMounted) to hide the loader after data arrives.

The generated progress bar uses simulated advancement with an exponential ease curve. Real progress tracking requires binding to actual data events (XMLHttpRequest.onprogress, fetch with ReadableStream, or file upload percentage). The simulation provides perceived progress which research shows reduces abandonment even without real metrics. To add real tracking, replace the simulated increment in the generated JS with your actual progress value (0 to 1).

CSS animations run on the compositor thread and do not block the main thread. Canvas animations require requestAnimationFrame calls on the main thread. For loading screens specifically, CSS is preferred because the main thread is likely busy loading resources. The generated output uses pure CSS keyframe animations for this reason. The Canvas preview in this tool is for real-time editing feedback only.

Loading screens display before external resources finish loading. Using a custom web font in the loader itself creates a circular dependency: the loader waits for the font, but the font is what you are loading. Use system font stacks (system-ui, -apple-system, sans-serif) for loading screen text. The generator defaults to system fonts for this reason.

Research from Nielsen Norman Group indicates that animations cycling at 1000-1200ms per rotation feel natural. Faster than 500ms creates anxiety. Slower than 2000ms suggests the system is stuck. The speed factor in this tool maps to rotation period: a factor of 1.0 equals approximately 1200ms per cycle. Adjust within the 0.5 to 2.0 range for optimal perception.

Generated files range from 2KB to 5KB depending on animation complexity. Spinning circle is the smallest at roughly 2.1KB. Complex animations like DNA helix reach approximately 4.8KB. All sizes are uncompressed. With gzip, expect 40-60% reduction. This is negligible compared to typical page payloads of 500KB to 3MB.