Créer un loader circulaire en CSS
ERROR
00:00
00:00

Tuto Créer un loader circulaire en CSS

Carl Brison
6,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer un loader circulaire en CSS
Leçon 2
BONUS : Intégrer le loader au chargement de la page web
Leçon 3
Bonus 2 : Faire disparaître l'opacité
Leçon 4
Pour aller plus loin

Plan détaillé du cours

Leçon 1Créer un loader circulaire en CSS
09m01s
Leçon 2BONUS : Intégrer le loader au chargement de la page web
08m43s
Leçon 3Bonus 2 : Faire disparaître l'opacité
01m33s
Leçon 4Pour aller plus loin
02m23s

Avis des apprenants

Détail des avis
11
Apprenants
6
Commentaires
4,9/5
Note moyenne
5/5
5
4/5
1
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 05/04/2023
Merci Carl pour ce loader circulaire, qui va m'être bien utile. Cours très bien expliqué qui donne assurément envie de continuer. Validé 100 % Loader circulaire
Carl Brison
Carl Brison
J'en suis ravi ! Merci beaucoup, Alain ;-)
Valérie Arno
Valérie Arno
Publié le 23/03/2023
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.
Carl Brison
Carl Brison
Merci pour votre commentaire, Valérie ;-)
Karim Lounici
Karim Lounici
Publié le 21/01/2022
Toujours au top, comme d’habitude.
Carl Brison
Carl Brison
Merci beaucoup ;-)))

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1373 tutos gratuits

Notre politique de protection des données