Compte à rebours
Minuteur de compte à rebours animé décomptant jusqu'à une date cible. Le style simple affiche des nombres bruts avec des libellés. Le style flip offre un effet d'horloge 3D à volets avec des cartes divisées et des animations CSS par images clés.
Simple
Nombres bruts avec libellés sous chaque unité, séparés par des deux-points
_countdown.html.erb
███
█████████ █ ██████ █████ █████████
███████
████████████ ██████ ████ █████ █ ████████
██████████ ███████ █████████ █████
███████████ ███████ █████████ █████
█████████████ ███████ █████████ █████
█████████████ ███████ █████████ █████
████████████████ ██████ █████████ ███████ █████
countdown_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ████████ ██████████ ██████████ ██████████
██████ ██████ █ █
███████████ ███████
█████████ █ █████ ████████ ████████ ████ ██
██████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ █
countdown_simple_component.html.erb
████ ██████████ █████████████████ ███ ███████████████████████████
█████████████████████████████████████ ████████████ ███
███████████████████████████████████ ██████████ ███
████████████████████████████████████ ███████████ ███
██████████████████████████████████████ █████████████ ███
██████████████████████████████████████ █████████████ ████
██ ██ ██████████ ██
████ █████████ ███████████ ████████ ██████████████
█████ ████████████████████████████ ██████████ ██████████████ █████████████
countdown_simple_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
█████ █ █
███ █ ███████ ███████████ ██████████ █████████ ██
███ █ ███████ ███████████ ██████████ ██████████ ██
███ █ ███████ ███████████ ██████████ ██████████ █
████████
██████████████ █ █
countdown_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ████████ ██████████ ██████████ ██████████
██████ ██████ █ █
███████████ ███████
█████████ █ █████ ████████ ████████ ████ ██
██████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ █
Flip
Animation d'horloge 3D à volets avec cartes divisées et transformations en perspective
_countdown.html.erb
███
█████████ █ ████ █████ █████████
███████
████████████ ██████ ████ █████ █ ████████
██████████ ███████ █████████ █████
███████████ ███████ █████████ █████
█████████████ ███████ █████████ █████
█████████████ ███████ █████████ █████
████████████████ ██████ █████████ ███████ █████
countdown_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ████████ ██████████ ██████████ ██████████
██████ ██████ █ █
███████████ ███████
█████████ █ █████ ████████ ████████ ████ ██
██████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ █
countdown_flip_component.html.erb
███████
████████████████████ █
████████████ ██████
█████████ █████████
█
████████████████████ ██████████
████████████████████ ████████████ █
█████████ █████████
█████ ██
██████ ██
countdown_flip_component.rb
█ ██████████████████████ ████
█████ ██████████████████████ █ ███████████████████
██████████ █ █
███ █████ ██████
███ █████ ██████
███ █████ █████
████████
██████████ █ █
countdown_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ████████ ██████████ ██████████ ██████████
██████ ██████ █ █
███████████ ███████
█████████ █ █████ ████████ ████████ ████ ██
██████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ ██
████████████ █ █████ ████████ ████████ ████ █
Journal des modifications
- v1.0.0: Initial release with simple and flip styles
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant