Créer un loader circulaire en CSS

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 :

• Formation jQuery
• Créer des animations en CSS, sans aucune programmation