150 CSS Spinners
This CSS Spinners collection is your complete arsenal for creating high-performance, technically relevant, and visually complex loading indicators. We demonstrate the advanced use of CSS Houdini and the @property rule for smooth animation of custom values, along with 3D transforms to create realistic effects like the “3D Tunnel” and “Cube Grid.” The key technical focus is on utilizing SVG animation for elegant “drawing” effects, and conic/radial gradients with masks for complex geometry. Master these techniques, including those involving animation-delay and :nth-child, to create stylish and performant loaders with minimal DOM.
Last updated:
Kinetic CSS Loader
A smooth, rhythmic, and mesmerizing loader that looks complex but is implemented simply and efficiently.
RGB Dot Preloader
A hypnotic, kaleidoscopic loader where white dots decompose into their RGB constituents during motion, generating a sensation of energy and complexity.
Pure CSS Loader #10/2020 - No SVG Arcs
An elegant loader built purely with CSS/SASS that leverages CSS Houdini’s @property to define and smoothly animate custom numeric properties, enabling a high-performance rotation and hue-shifting loop.
Pure CSS Loader #11/2020 - Ripples
Spectacular animated ring loader built on the advanced capabilities of CSS Houdini to define and smoothly transition custom properties, enabling complex and dynamically changing geometry via conic and radial gradients.
Color Wheel Loader using Animated Custom Properties
Advanced CSS animation utilizing ten-point delays (nth-child) to create a ripple effect and showcasing CSS Houdini capabilities for animating length and angle values.
Infinity SVG Spinner with CSS Animation
An elegant and minimalistic CSS spinner built purely with SVG, where the core motion effect (drawing and erasing) is achieved by animating the stroke-dasharray and stroke-dashoffset properties within the @keyframes dash rule.
