Afin de faire patienter les utilisateurs au moment du chargement d'une page web, il peut être intéressant de mettre en place une petite animation de chargement. Cet indicateur visuel que nous appelons "loader" en anglais, peut prendre différentes formes. C'est un élément important en terme d'UX puisqu'il indique à l'utilisateur que quelque chose se charge sur la page. Cela évite donc tout confusion, rassure et permet à l'utilisateur de rester sur votre page.
Dans ce tuto vidéo, je vous propose de réaliser un loader circulaire en utilisant le langage CSS.
La création de l'animation sera simple.
En guise de bonus, je vous proposerai un petit script en jQuery qui vous permettra d'intégrer très facilement le loader au chargement de la page.
Pour aller plus loin dans vos connaissances, je vous propose les tutos suivants :
Table des matières de cette formation CSS, jQuery (durée : 21m40s)
-
- Créer un loader circulaire en CSS 00:09:01
- BONUS : Intégrer le loader au chargement de la page web 00:08:43
- Bonus 2 : Faire disparaître l'opacité 00:01:33
- Pour aller plus loin 00:02:23
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Le loader circulaire, sympa sur la page pendant le chargement et très facile à mettre en place. Tuto suivi avec plaisir. Je pars à présent sur le tuto du loader bullet :-) Merci Carl.
-
Toujours au top, comme d’habitude.
-
Petit problème : la page 'Bonjour !' reste soumise à l'opacité de 'loading' à la fin du tuto. Ne faut-il pas ajouter un petit quelque chose au 'script.js' pour revoir le jaune ?
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Que contient le fichier source ?Le code source complet de ce tutoriel
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés