Comment définir le logo dans le chargeur en utilisant CSS ?
Pour commencer à répondre à cette question, nous devons d'abord créer un "Loader". Toute animation qui informe l'utilisateur ou le visiteur qu'une page est en cours de chargement et qu'elle prendra quelques secondes est appelée un Loader.
La plupart du temps, les chargeurs sont utiles lorsqu'un site Web met trop de temps à récupérer les résultats. Si un site Web particulier ne dispose pas d'un chargeur CSS, les utilisateurs penseront qu'il ne répond pas du tout pendant son chargement.
Par conséquent, l'ajout d'un chargeur CSS à une page Web distraira l'utilisateur ou attendra un certain temps que la page se charge correctement. Plutôt que de donner l'impression que le site ne répond pas, une simple animation montre que le site est toujours en train de récupérer des résultats et que la page sera prête dans quelques secondes.
Vous pouvez utiliser CSS pour ajouter des styles, des animations ou toute autre forme de style pour créer un chargeur.
Exemple
Nous allons maintenant créer la forme de chargeur la plus courante sur Internet en utilisant CSS.
<!DOCTYPE html>
<html>
<head>
<title>Example of a loader using CSS</title>
<style>
h1 {
color: rgb(0, 128, 111);
}
.loader {
display: block;
position: absolute;
width: 15px;
height: 15px;
left: calc(50% - 1.25em);
border-radius: 1.25em;
transform-origin: 1.25em 2.25em;
animation: rotateAnimation;
animation-iteration-count: infinite;
animation-duration: 1.85s;
}
@keyframes rotateAnimation {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.item1 {
animation-delay: 0.12s;
background-color: #1b7842;
}
.item2 {
animation-delay: 0.22s;
background-color: #239b53;
}
.item3 {
animation-delay: 0.32s;
background-color: #2ecc72;
}
.item4 {
animation-delay: 0.42s;
background-color: #82e0a0;
}
.item5 {
animation-delay: 0.52s;
background-color: #d5f5de;
}
</style>
</head>
<body>
<center>
<h1 id="Loader-in-CSS">Loader in CSS</h1>
<h4 id="Example-of-the-most-common-form-of-loader-in-CSS">Example of the most common form of loader in CSS</h4>
<div>
<div class="loader item1"></div>
<div class="loader item2"></div>
<div class="loader item3"></div>
<div class="loader item4"></div>
<div class="loader item5"></div>
</div>
</center>
</body>
</html>
Exemple
Il s'agit d'une autre forme de chargeur qui s'anime sur l'axe horizontal.
<!DOCTYPE html>
<html>
<head>
<title>Example of a loader using CSS</title>
<style>
h1 {
color: rgb(0, 128, 111);
}
.loader {
display: block;
position: absolute;
width: 150px;
height: 15px;
left: calc(58% - 5.25em);
transform-origin: 2px 20px;
animation: rotateAnimation;
animation-iteration-count: infinite;
animation-duration: 2.85s;
}
@keyframes rotateAnimation {
from {
transform: rotateY(55deg);
}
to {
transform: rotateY(360deg);
}
}
.item1 {
animation-delay: 0.12s;
background-color: #1b7842;
}
.item2 {
animation-delay: 0.22s;
background-color: #239b53;
}
.item3 {
animation-delay: 0.32s;
background-color: #2ecc72;
}
.item4 {
animation-delay: 0.42s;
background-color: #82e0a0;
}
.item5 {
animation-delay: 0.52s;
background-color: #d5f5de;
}
</style>
</head>
<body>
<center>
<h1 id="Loader-in-CSS">Loader in CSS</h1>
<h4 id="Example-of-the-most-common-form-of-loader-in-CSS">Example of the most common form of loader in CSS</h4>
<div>
<div class="loader item1"></div>
<div class="loader item2"></div>
<div class="loader item3"></div>
<div class="loader item4"></div>
<div class="loader item5"></div>
</div>
</center>
</body>
</html>
Ajouter un logo dans le chargeur
Maintenant que nous savons comment créer un chargeur en CSS, nous allons maintenant passer à la façon d'ajouter un logo au chargeur que nous venons de créer.
Essayons d'abord de comprendre pourquoi nous pourrions avoir besoin d'ajouter un logo à l'intérieur du chargeur. Un logo est la marque et l'identité d'une marque, qui ajoute une touche personnelle à l'expérience utilisateur. De nos jours, tous les sites Web utilisent des chargeurs de personnalisation qui ont un impact positif sur leur marque à chaque fois qu'un utilisateur accède à leur site Web.
Algorithme
L'algorithme que nous suivrons pour créer un chargeur qui intègre le logo est le suivant -
Étape 1- Pour inclure notre chargeur, nous allons créer un fichier HTML et ajouter un div HTML au corps du fichier.
Étape 2 - Pour animer notre logo et notre chargeur, nous allons écrire un fichier CSS ou l'intégrer à l'aide de balises de style.
Étape 3 - Insérez le logo à l'aide de la balise
à l'intérieur de la balise div afin qu'il s'affiche désormais dans la classe de chargement
à l'intérieur de la balise div afin qu'il s'affiche désormais dans la classe de chargementVous trouverez ci-dessous les propriétés que nous pouvons utiliser pour le chargeur -
Nous personnaliserons la bordure, la couleur, la hauteur et la largeur en fonction du logo, ce qui améliorera considérablement la cohérence globale et augmentera l'originalité de la marque.
Pour ajouter une animation de changement progressif, nous utiliserons la règle @keyframes en CSS.
Ensuite, pour faire tourner le chargeur, nous utiliserons la propriété CSS Transform.
Nous concevrons la taille de l’image du logo de manière à ce qu’elle soit inférieure ou égale à la taille du chargeur. Nous ajouterons un style d'animation dans le sens opposé pour contrecarrer l'effet de rotation du logo.
Exemple
Vous trouverez ci-dessous un exemple d'ajout d'un chargeur à un site Web en utilisant l'algorithme ci-dessus.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.loaderClass {
border: 12px solid #dcd7d7;
border-top: 12px solid #04802f;
border-radius: 50%;
width: 120px;
height: 120px;
animation: SpinLoader 2.5s linear infinite;
}
.loaderClass img {
height: 120px;
width: 120px;
border-radius: 50%;
animation: LogoModify 2.5s linear infinite;
}
@keyframes SpinLoader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes LogoModify {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="loaderClass">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/887/227/169555783454341.jpg" class="lazy" alt="Comment définir le logo dans le chargeur en utilisant CSS ?">
</div>
</body>
</html>
Conclusion
Dans l'ensemble, définir le logo dans le chargeur à l'aide de CSS est une tâche simple. Tout ce que vous avez à faire est de définir la largeur et la hauteur de votre logo, puis de l'ajouter comme image d'arrière-plan de votre chargeur à l'aide de l'attribut "background-image". Vous pouvez également ajuster sa position à l'aide des propriétés "background-position" ou "margin" et la personnaliser davantage avec d'autres options de style telles que les bordures, l'ombre de la boîte, etc. Avec quelques connaissances de base en CSS, vous pouvez facilement créer un magnifique chargeur avec un logo. temps!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Barbars CSS personnalisés chics et cool: une vitrine
Mar 10, 2025 am 11:37 AM
Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients?
Mar 14, 2025 am 11:10 AM
L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)
