Spinner
Componente indicador de carregamento com variantes circular, pontos e barra. Animações CSS puras — sem JavaScript necessário.
Pré-visualização e Código
_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
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora