Lorsque les sites Web sont lents, les utilisateurs sont frustrés. Ils peuvent même partir ! Les animations de texte de chargement CSS sont la solution. Elles captent l'attention et empêchent les visiteurs de perdre leur concentration en attendant que le contenu se charge. Elles peuvent être personnalisées pour renforcer l'image de marque. Elles améliorent l'expérience utilisateur globale, rendant même les temps d'attente agréables.
Voyons comment vous pouvez créer ces animations avec du CSS et du HTML simples (ne vous inquiétez pas, ce ne sera pas très technique). En plus de cette animation de texte de chargement CSS, vous trouverez une méthode alternative de création d'animation de texte de chargement avec Filmora.
Alors commençons !
Dans cet article
Partie 1. Qu'est-ce que l'animation de texte de chargement ?
Dans le GIF ci-dessus, il y a un mot animé « Chargement ». Voici à quoi ressemble une animation de texte de chargement. Vous pouvez avoir cette animation dans plusieurs polices, couleurs et styles d'animation.
Utilisation de l'animation de chargement dans un site Web.
Si votre site Web est lent ou charge un fichier lourd, vous pouvez afficher ce texte de chargement. Il informe les utilisateurs que leur demande est en cours de traitement. Ce sera comme une distraction visuelle, rendant l'attente plus courte et moins frustrante.
Comment fonctionne l'animation de texte de chargement ?
Les choses deviennent un peu techniques ici, mais pas trop techniques. Habituellement, il y a du code HTML et CSS derrière. Le HTML contient le texte. CSS contient des instructions sur la façon de se déplacer, de changer de couleur ou même de disparaître et de réapparaître. Parfois, il utilise un code plus sophistiqué (JavaScript) pour créer des effets plus complexes.
Pensez-y comme à une recette :
- Le texte de base correspond aux ingrédients.
- Le CSS contient les instructions sur la façon de cuisiner (animer) ces ingrédients.
- JavaScript peut être comparé à l'ajout d'épices ou de techniques supplémentaires pour un plat plus unique.
Partie 2. Comment utiliser CSS pour créer une animation de chargement de texte
L'utilisation de l'animation de chargement de texte CSS n'est pas une tâche difficile si vous suivez la bonne procédure. Il vous suffit de jeter un œil à quelques points rapides ci-dessous.
- Utilisez la console de développement présente sur les principaux navigateurs.
- Maintenant, pour l'ouvrir, appuyez simplement sur F12.
- Sélectionnez l'élément où vous souhaitez ajouter du texte avant ou après.
- Commencez à éditer.
- Personnalisez-le.
- Enfin, ajoutez vos modifications à l'animation de chargement de texte CSS de votre site en créant un composant de thème.
Qu'est-ce que CSS et comment est-il utile pour charger une animation de texte
Le CSS est un langage. Pour simplifier, vous pouvez dire qu'il s'agit du maquilleur du site Web. Il dicte l'apparence du site Web. Contrôler tout, des couleurs et des polices à la disposition des éléments sur la page.
Pour plus de précisions sur le fonctionnement de CSS, consultez l'exemple suivant :
Pour le chargement des animations de texte, c'est le chorégraphe qui indique comment se déplacer et changer au fil du temps. Il utilise des instructions spéciales (propriétés et images clés) pour créer des effets visuels. Ces effets peuvent être des fondus enchaînés, des glissements ou même des effets de rebond, ce qui rend les temps d'attente plus attrayants visuellement.
Maintenant que vous avez compris les bases, créons votre animation de texte de préchargement.
Comment créer une animation de texte de chargement avec CSS
Voici un aperçu de la façon d'écrire du code pour votre animation de texte de chargement. Nous utiliserons CSS pour ajouter un cercle tournant et un texte en fondu sympa à votre site Web. Vous trouverez également un exemple de code entièrement personnalisable.
Structure HTML :
Étape 1 : Créer la fondation :
Configurer le conteneur principal (conteneur de chargement) pour contenir à la fois le cercle rotatif et le texte.
Étape 2 : Ajouter les éléments visuels :
- Inclure un div pour le cercle de chargement afin de représenter l'indicateur de chargement visuel
- Utiliser un div pour le texte de chargement et imbriquer chaque lettre dans des balises individuelles. Cela nous permet d'animer chaque lettre séparément.
Style CSS :
Étape 1 : définissez le contexte :
Appliquez le style du corps avec la couleur d'arrière-plan, la police et les propriétés de mise en page pour centrer le contenu.
Étape 2 : concevez le cercle
Donnez au cercle de chargement sa forme, sa bordure, sa couleur et son animation de rotation.
Étape 3 : définissez le style du texte :
Définissez la taille de police et la couleur du texte de chargement.
Étape 4 : animez le texte :
Faites apparaître chaque lettre du texte de chargement en fondu et montez légèrement à l'aide de l'animation fadeInUp, avec des délais décalés pour un effet séquentiel.
Exemple Codes
Voici un exemple de code. Utilisez à la fois HTML et CSS. Ce code crée une animation de chargement sympa avec un cercle tournant et un texte qui disparaît. Vous pouvez facilement modifier ses couleurs et son texte pour qu'ils s'adaptent parfaitement à votre site Web.
Code HTML à référencer
Code CSS à copier
body{font-family:'Nunito Sans',sans-serif;background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;min-height:100vh}
.loading-container{display:flex;align-items:center}
.loading-circle{width:50px;height:50px;border-radius:50%;border:5px solid #ccc;border-top-color:#9b59b6;animation:spin 1s linear infinite;margin-right:20px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:36px;color:#9b59b6}
.loading-text span{opacity:0;transform:translateY(20px);animation:fadeInUp 1s accélération-entrée-sortie vers l'avant}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.loading-text span:nth-child(1){animation-delay:.2s}
.loading-text span:nth-child(2){animation-delay:.4s}
.loading-text span:nth-child(3){animation-delay:.6s}
.loading-text span:nth-child(4){animation-delay:.8s}
.loading-text span:nth-child(5){animation-delay:1s}
.loading-text span:nth-child(6){animation-delay:1.2s}
.loading-text span:nth-child(7){animation-delay:1.4s}
.loading-text span:nth-child(8){animation-delay:1.6s}
.loading-text span:nth-child(9){animation-delay:1.8s}
.loading-text span:nth-child(10){animation-delay:2s}
Étapes de personnalisation
1. Modifier le texte
- Dans le code HTML, recherchez la section div class="loading-text"
- Remplacez les lettres dans les balises span par le texte souhaité.
- Assurez-vous d'ajouter ou de supprimer des balises span pour qu'elles correspondent au nombre de caractères de votre nouveau texte
2. Changer les couleurs
- Dans le CSS, recherchez la section body
- Changez la valeur "background-color" par la couleur d'arrière-plan souhaitée (par exemple, #ffffff pour le blanc)
- Recherchez la section ".loading-circle".
- Changez la valeur "border-top-color" par la couleur souhaitée pour la partie supérieure du cercle rotatif.
- Recherchez la section ".loading-text
- Changez la valeur "color" par la couleur de texte souhaitée
3. Changer la police
- Dans le code HTML, recherchez les balises qui chargent la police Nunito Sans
- Remplacez la valeur "href" dans ces balises par l'URL d'une autre police Google que vous souhaitez utiliser
- Veillez également à mettre à jour la "font-family" dans la section du corps CSS pour qu'elle corresponde au nom de votre nouvelle police
4. Ajustez la vitesse et la taille de l'animation
- Dans le CSS, recherchez la section .loading-circle
- Modifiez la partie "animation: spin 1s linear infinite;"
- Le "1s" contrôle la vitesse du cercle en rotation (un nombre plus élevé = plus lent)
- Dans la section ".loading-text span", vous trouverez "animation-delay" pour chaque lettre
- Modifiez ces valeurs pour ajuster la vitesse à laquelle chaque lettre s'estompe.
Techniques CSS avancées pour l'animation de texte
L'apprentissage des techniques CSS est un excellent moyen d'acquérir une expérience approfondie de l'animation de texte préchargée. Cela vous aide généralement à rendre les sites Web plus attrayants. Voici quelques-unes des techniques avancées que vous pouvez utiliser pour l'animation de texte :
- Animation traditionnelle : animations de base telles que les fondus, les glissements et les rebonds.
- Animation 2D : profitez de transitions et d'effets fluides dans un espace plat et bidimensionnel.
- Animation 3D : ajout de profondeur et de rotation au texte pour une expérience riche.
- Graphiques animés : combinaison de texte et d'éléments graphiques pour des animations complexes.
- Arrêt de mouvement : imitation de la sensation d'une animation image par image pour un effet unique.
Partie 3. Quelle est la manière la plus simple de créer votre animation de texte de chargement ?
Filmora vous aide à créer des animations de texte à charger en quelques secondes. Parce qu'il dispose de modèles. Sélectionnez simplement celui qui correspond à vos besoins.
Filmora est un logiciel de montage vidéo facile à utiliser, même si vous débutez dans le montage vidéo. Il regorge de fonctionnalités pour vous aider à créer des vidéos étonnantes. Ajoutez des effets sympas, de la musique, du texte et bien plus encore. Filmora vous permet de donner vie à vos idées en toute simplicité.
les textes de chargement animés créés par Filmora
Fonctionnalités de chargement d'animation de texte dans Filmora
- Bibliothèque d'animation de texte étendue : Filmora propose de nombreuses animations de texte. Cela inclut des effets dynamiques tels que des fondus, des effets de machine à écrire et des animations de rebond.
- Polices et couleurs personnalisables : une large gamme de polices et de couleurs pour personnaliser leurs animations de chargement de texte.
- Chemins d'animation : Filmora permet aux utilisateurs de sélectionner différents chemins d'animation pour le texte.
- Texte piloté par l'audio : synchronise les animations de texte avec les signaux audio. Ce qui permet une animation de chargement plus dynamique.
Filmora VS. CSS, quelle est la meilleure façon de créer un texte de chargement ?
| Fonctionnalité | Filmora | CSS |
| Options de personnalisation | Options étendues pour les polices, les couleurs, les animations et les chemins d'animation | Options de personnalisation limitées |
| Effets d'animation | Diverses animations de texte de chargement prédéfinies | Animations de chargement personnalisées à l'aide des propriétés CSS |
| Interface utilisateur | Intuitive et convivial | Nécessite des connaissances en codage |
| Facilité d'utilisation | Simple |
Plus complexe |
| Compatibilité multiplateforme | Fonctionne sur Windows, macOS, iOS, Android et iPadOS | Peut être utilisé sur n'importe quelle plateforme prenant en charge CSS |
| Performances | Optimisé pour des animations fluides | Les performances dépendent de l'implémentation |
| Coût | Logiciel payant avec essai gratuit | Utilisation gratuite |
Étapes pour créer une animation de texte de chargement avec Filmora
Étape 1 : Installer et exécuter Filmora
Téléchargez la dernière version de Filmora en cliquant sur le bouton ci-dessous et installez-la sur votre ordinateur ou vos appareils mobiles. Une fois installée, ouvrez-la et créez un nouveau projet.
Étape 2 : recherchez le « modèle de chargement »
Cliquez sur le bouton Titre dans le menu supérieur et une barre de recherche apparaîtra, recherchez « chargement ».
Étape 3 : choisissez un modèle :
Choisissez celui que vous aimez et faites-le glisser dans la chronologie. Supposons que nous ayons sélectionné celui-ci :
Étape 4 : modifier le texte et autres personnalisations :
Pour modifier le texte, sélectionnez l'élément. Un panneau de gauche apparaît avec quelques options de personnalisation. Modifiez le texte.
Étape 5 : prévisualisez l'animation de texte de chargement :
Prévisualisez le résultat final et vérifiez si tout va bien.
Étape 6 : Exporter et partager :
Appuyez sur le bouton d'exportation en haut à droite, puis choisissez le format et le dossier de destination. Appuyez à nouveau sur « Exporter ».
Fonctionnalités d'édition de texte plus avancées de Filmora
Outre les modèles, Filmora dispose également de nombreuses autres fonctionnalités d'édition. Voici quelques exemples.
- Animations dynamiques : choisissez parmi une variété d'animations et plus de 10 000 préréglages. Observez de manière créative la magie des mots et des diapositives.
- Idées créatives : accédez à plus de 10 millions d'idées créatives.
- Remplissage : choisissez des couleurs vives ou des nuances subtiles pour faire ressortir votre texte.
- Contour : ajoutez des bordures frappantes pour faire ressortir votre texte.
- Ombre : créez de la profondeur avec des ombres qui ajoutent une touche de réalisme.
- Arrière-plan : créez le décor avec des arrière-plans qui mettent en valeur votre texte et s'alignent sur votre conception globale.
- Expérience de visionnage améliorée : engagez votre public sans y consacrer de nombreuses heures de travail.
- Conversion vocale : prise en charge de 26 langues, dont l'arabe, le bengali, le chinois (mandarin/cantonais), le croate, le danois, le néerlandais, l'anglais (États-Unis/Royaume-Uni/Inde), le français, l'allemand et bien plus encore.
Partie 4. Meilleurs exemples d'animation de chargement de texte
Il existe des milliers d'animations de chargement de texte, mais nous allons voir ici 3 des meilleurs exemples de Filmora.
1. Animation de texte de chargement de fenêtre pour les vidéos
2. Chargement de l'animation de texte avec la barre de chargement
3. Chargement de texte avec compte à rebours
Conclusion
Vous voulez faire une impression durable ? Ouvrez Filmora et découvrez comment charger une animation de texte. Débloquez un trésor de modèles de conception professionnels pour tous vos besoins créatifs. Améliorer vos compétences en conception est simple dans un monde d'inspiration illimitée avec Filmora. Vous pouvez également utiliser des animations de chargement de texte CSS avancées pour obtenir une expérience inégalée.
