Playground
Try every theme and option here before writing any code. Every change applies to all the loaders below at once, so you can compare themes side by side.
- Icon switches the animated icon:
spinner,dots,bars,pulse,sparkle, ornonefor text only. - Interval sets how long each message stays up. Around 2 to 3 seconds gives people time to read a line without the loader feeling slow.
- Ordered keeps each theme's messages in the order they were written. Leave it off to shuffle them, which is the default.
- Paused stops the text and the icon, and freezes the wait clock.
- Fade, Size and Icon color are the styling options from Styling.
Simulate a long request speeds up the wait clock, so you don't have to sit through it. At 4× or 10×, watch each card's stage go from 0 to 1 to 2 as the messages move on to lines that acknowledge a long wait. Restart begins a fresh wait.
Under the grid, Your settings, ready to paste shows the markup and CSS for what you've set up, and Your own messages lets you test your own lines with the same settings.
Simulate a long request Waited 0.0 s. Messages change at 8 s and 20 s.
Your settings, ready to paste
<fun-loader theme="thinking"></fun-loader>