A loading indicator tells users something is happening. Building one from CSS keyframes takes experience. Generating one takes 30 seconds.
The 6 Loader Styles and When to Use Each
Spinning Ring — the universal standard. Use it when in doubt. Bouncing Dots — great for chat interfaces and messaging UIs. Pulsing Bars — common in audio and media players. Pulse Circle — subtle, ideal for inline button loaders. Dual Ring — visually rich, good for prominent loading states. Ripple — eye-catching, effective for splash screens.
All generated CSS uses transform and opacity animations — GPU-accelerated properties that animate at 60fps without triggering layout reflow.
Matching Your Brand Colours
Use the primary colour picker for your main brand colour and set the secondary to a 50% opacity tint of the same hue. This creates visual harmony rather than two unrelated colours competing for attention.
Implementing on Your Page
Copy the CSS, add it to your stylesheet, place the HTML element in your markup. Toggle a hidden class with JavaScript to show or hide the loader as needed.