Comment ajouter un indicateur de chargement à vos boutons pour une expérience utilisateur améliorée
Автор: Remote Monkey
Загружено: 2023-04-27
Просмотров: 3149
👇Télécharge le Starter Kit les ressources et le code source complet👇
https://www.coders-monkeys.com/ressou...
📦 Gagne un maximum de temps avec ce kit préconfiguré spécialement conçu pour t'aider à démarrer la formation et évite les problèmes de dépendances et les erreurs d'environnement lié à l’évolution des Framworks.
Télécharge le Starter Kit, toutes les ressources, ainsi que le code source complet de l'application avant de commencer la formation.
--------------------------------------------------
🫡 Cette vidéo fait partie d'une playlist disponible ici : • Création d'une Application Web avec React,...
---------------------------------------------------
🤳 Abonne-toi à la chaîne pour ne rater aucunes vidéos.
🫵 Si la vidéo t'apporte de la valeur, laisse-moi un gros pouce bleu et rejoins les membres !
✍️ N’hésite pas à indiquer en commentaire tes échecs, tes questions, mais aussi tes succès !
-------------------------------------------
👣 Chapitres
00:00 Introduction
0:33 La notion de loading dans un bouton a quoi ça sert ?
2:16 Création d'un composant loading réutilisable
16:59 Intégration d'un loader dans un bouton React
23:21 Le secret d'un chargement propre
34:04 Conclusion
-------------------------------------------
🚀 Résumé de la vidéo :
Bienvenue dans cet épisode de la formation sur la création d'un bouton de chargement animé avec React , Next.js et Tailwind CSS.
Dans ce tutoriel, tu apprendras à créer un composant de chargement (loading/spiner) animé en utilisant un simple SVG statique, à configurer le bouton de notre design système pour intégrer un effet de chargement propre et efficace, nous terminerons le composant bouton de notre design système à la fin de cet épisode.
Tu découvriras comment ajouter un indicateur de chargement à tes boutons pour offrir une expérience utilisateur améliorée, et ce en utilisant les dernières technologies, comme React, Tailwind CSS, le design système, et Next.js.
Dans cette formation, nous irons directement dans le vif du sujet sans perdre de temps avec des présentations inutiles. Je te guiderai tout au long du processus de création de ce bouton de chargement animé et t'offrirai des astuces pratiques pour rendre le code plus performant et efficace.
En suivant cette formation, tu auras toutes les compétences nécessaires pour ajouter des fonctionnalités de chargement animé à tes boutons dans tes projets React, cela les rendra plus pro et tu offriras ainsi une expérience utilisateur améliorée à tes utilisateurs.
Alors, prêt à apprendre comment créer un bouton de chargement animé avec React et Tailwind CSS dans notre design système? Clique sur le bouton de lecture pour découvrir les secrets de la création de boutons animés efficaces! ;)
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: