Dans ce tuto en vidéo, nous allons réaliser une série de projets pratiques autour des icônes de chargement.
Savoir créer et intégrer des icônes de chargement, est un passage obligatoire quand on est développeur frontend,
Au programme de ce tuto création de loader en 12 exemples
Nous allons dans un premier temps créer 12 icônes de chargements, des "loaders", en CSS. Cela va booster votre niveau en CSS, notamment au niveau des animations, transitions, pseudo-elements, placements...
Puis, nous allons voir comment intégrer un loader lors du chargement d'un site.
Rendez-vous de l'autre côté pour commencer à coder !
Table des matières de cette formation CSS (durée : 1h14m)
-
Introduction
- Introduction gratuit 00:00:52
- Code source 00:01:51
- Mise en place dossier 00:01:26
- Création de la grille 00:06:03
-
Animations
- 1. Loader classique gratuit 00:03:00
- 2. Animation 2 ronds 00:04:27
- 3. Vague 00:04:51
- 4. Trois points disparition 00:03:59
- 5. Texte clignotant 00:06:29
- 6. Texte disparition 00:02:59
- 7. Toupie 00:05:06
- 8. Trois traits rotation 00:05:59
- 9. Rebondir 00:02:58
- 10. La classique 00:07:01
- 11. Anim flou 4 points 00:07:15
- 12. Flip Panneau 00:03:27
- Intégrer un loader au chargement d'un site 00:06:53
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Rapide, clair et comme toujours efficace. Un grand merci !
-
Excellente formation Enzo, j'adore !!! C'est typiquement LA FORMATION à avoir pour faire des loaders sur nos sites web. Merci beaucoup pour ce tuto très complet :)
-
Merci encore pour ce tuto clair et précis.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés