Spinner
Loading indicator component with circular, dots, and bar variants. Pure CSS animations — no JavaScript required.
Preview & Code
_spinner.html.erb
███
███████ █████████ █████████
██████
███ ██████ ████████████████████ ██
███ ██████ █████████████████████ ████████ ██████ █████ ███ ██
███ ██████ █████████████████████ ████████ █████ ██████ ████████ ██
███ ██████ █████████████████████ ████████ ██████████ █████ ████ ██████ ███████ ██████ ███████ ████████ ██
██
spinner_component.html.erb
██ ██ █████████ ██
████ █████████████ ██████████ ██████████████████████████ ████
████ ██████████ ███████████████ ██████████
█████ ███████████████████ █████ █████████
██████
██ █████ █████ ██
████ █████████████ ██████████ ██████████████████████ ████
██ ███████████████ ██ ███████ ██
████ ██████████ ███████████ ███ █████████████████ ███████████████████ ████ ████████ ███████████ █████ ████████████████ ███ █████ ███████████
██ ███ ██
spinner_component.rb
█ ██████████████████████ ████
█████ ████████████████ █ ███████████████████
████████ █ ███████████ ████ ███████████
█████ █ █████ ██ ██ ██ ██████████
██████ █ ██████████ █████ ███████████████
██████████ █ █ █████████ █████████ ████ ████████
███ ███████████████████ ██████████ █████ ████ ██████ █████████ ██████ █████████████ ████████
████████ █ ██████████████
Changelog
- Unified circular, dots, and bar into single component with variant option
- Five size options
- Three color schemes with dark mode support
- CSS-only animations, no JavaScript
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now