Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
CSS Loader Generator
Pick from 10 pure-CSS loading spinners and copy the keyframes.
Tool Panel
Processed locallyAbout CSS Loader Generator
Ten pure-CSS loading animations with adjustable size, colour and speed. The preview is rendered from the very CSS in the output box below.
- 1
Ten pure-CSS loading animations (spinner, dots, pulse, bars, grid, orbit, flip, ripple, wave, progress). Each one outputs a `@keyframes` block plus a class rule — no SVG, GIF or JS dependency.
- 2
Keyframe names carry a `bz-` prefix (such as `bz-spin`), so pasting them into an existing project cannot collide with your own animations. Size, colour and speed update the code immediately.
- 3
The preview is rendered from **the same CSS** you copy rather than a separate mock-up, so what you see is what ships. The translucent track colour is derived from the main colour, so contrast takes care of itself when you recolour.
- 1
Pick an animation
Each of the ten shapes has its own keyframes; switching replaces the code.
- 2
Set size, colour and speed
Size drives the border thickness (one eighth of it), and speed is the animation duration in milliseconds.
- 3
Copy the CSS and add the class
Paste it into a stylesheet, then put the matching class (like `bz-spinner`) on the element that should animate.
Yes — edit the line you copied. It is plain CSS (`animation: bz-spin 900ms linear infinite;`), so swapping `linear` for `ease-in-out`, replacing `infinite` with `1`, or inserting `animation-delay: 200ms;` is entirely yours to do.
Size and sharpness: each animation is a dozen lines of CSS (about 0.3 KB) with no image request, and it stays crisp at any scale or pixel density, whereas a GIF costs tens to hundreds of KB and is limited to 256 colours. The trade-off is that CSS only draws geometric motion (rotate, scale, translate, mask) — it cannot produce an illustrated loading graphic.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools