6,00

Tuto Créer un loader circulaire en CSS avec CSS, jQuery

6,00

  • Une formation vidéo de 21m40s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Créer un loader circulaire en CSS

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Carl Brison

Carl Brison a publié 292 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 281 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

4,8
note moyenne

5
avis laissés
5 étoiles
4
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de valerie-a77 laissé 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.
    "Merci pour votre commentaire, Valérie ;-)"

  • 5
    avis de membre-7459-7618 laissé le 21/01/2022
    Toujours au top, comme d’habitude.

  • 5
    avis de ddumasdr laissé le 01/05/2021
    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 ?
    "Merci, vous avez raison. Ajoutez ceci dans le script: $('#loading').hide(); Je vais faire une vidéo Bonus ;-)"

  • 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
Parcours Developpeur Front End
accédez à plus de 1401 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données