Pulse Dots
Pulse Dots rebuilt in framework-independent HTML, CSS, SVG and Vanilla JavaScript.
HorizonX UI/UXTool collection
CSS Loaders & Loading Animations
Loading spinners, pulsing dots, rings and skeleton loaders built with HTML, CSS and a little JavaScript. Tune the colour, size and timing of each loading animation in the browser, then export it as HTML, Svelte or React. Pick the loader by the kind of wait it covers.
- 50 components
- Edit live in the browser
- Export HTML, Svelte or React
- Read the guide
Dots and pulses
HorizonX UI/UXRings and spinners
Skeletons, text and other loaders
Spinner, dots or skeleton?
A spinner or ring fits a short wait where nothing about the result is known yet, such as a button press or a form submit. Pulsing or bouncing dots read as "working on it" and suit chat replies and AI answers.
A skeleton loader belongs where content is about to appear. It previews the layout, so the page does not jump when the data arrives.
Match the loader to the interface
Keep the loader in the colour family of the control that started the wait, and size it to the space it fills: a small spinner inside a button, a larger ring for a full-page load. Every loader here exposes its colours and timing in the editor, so you can match your brand before exporting.
Accessible loading states
A loader is decoration unless it says what is happening. Pair it with a text status such as a visually hidden "Loading" message, and use one loader per waiting region rather than several at once.
Keep exploring
Related collections
Tune it live, then export the code
Every interactive tool on HorizonX opens in an editor you can adjust in the browser before you export it.