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
  • Découvrez pourquoi vous former avec Tuto.com
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é 229 tutoriels et obtenu une note moyenne de 4,9/5 sur 15 336 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

4,7
note moyenne

3
avis laissés
5 étoiles
2
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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 ;-)"

  • 5
    avis de mba1 laissé le 30/04/2021
    Comme d'habitue Top *****

  • 4
    avis de psyops49 laissé le 29/04/2021
    Merci pour ce tuto intéressant

  • 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 1355 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données