How to use it
1. Add the stylesheet
<link rel="stylesheet" href="loaders.css">
2. Paste a loader
In the demo above, click any loader to copy its HTML. Most are a single element.
<span class="ldr ldr-ring"></span>
3. Set colour and size
A loader uses the current text colour. The size comes from --ldr-size.
<span class="ldr ldr-ring" style="color: #7c5cff; --ldr-size: 64px"></span>
The twelve loaders
| Class | Looks like | Inner elements |
|---|---|---|
ldr-ring | Classic spinning ring | none |
ldr-dual | Two rings turning in opposite directions | none |
ldr-arc | A ring with a soft fading tail | none |
ldr-dots | Three pulsing dots | three <i> |
ldr-wave | Five dots jumping in a wave | five <i> |
ldr-bars | Four equalizer bars | four <i> |
ldr-pulse | A dot sending out a pulse | none |
ldr-ripple | Two expanding rings | none |
ldr-orbit | A glowing dot circling a ring | none |
ldr-flip | A square flipping over | none |
ldr-grid | Nine squares fading in a diagonal wave | nine <i> |
ldr-progress | A progress bar with no known end | none |
Change the speed
<span class="ldr ldr-dots" style="--ldr-speed: .6s"><i></i><i></i><i></i></span>
Put a loader inside a button
Because a loader takes the text colour, it fits into a button without extra CSS.
<button disabled> <span class="ldr ldr-ring" style="--ldr-size: 1em"></span> Saving... </button>
Full-page loading screen
<div style="position:fixed; inset:0; display:grid; place-items:center; background:#fff; color:#7c5cff"> <span class="ldr ldr-ripple" style="--ldr-size: 72px"></span> </div>
Accessibility
A spinner is only a picture. Tell screen readers what is happening by adding a role and a label.
<span class="ldr ldr-ring" role="status" aria-label="Loading"></span>
Visitors with reduced motion switched on get a much slower animation instead of a fast spin.
What is in the download
loaders.cssall twelve loaders, about 5 KBindex.htmlanddemo.cssthe demo page you see aboveREADME.txtandLICENSE.txtthe short guide and the MIT licence
Licence
MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.