Comment créer un chargeur élégant pour votre site Web

Introduction

Un chargeur (ou un spinner de chargement) améliore l'expérience utilisateur en fournissant un retour visuel pendant les temps de chargement. Dans ce didacticiel, nous allons créer un chargeur élégant et moderne en utilisant HTML et CSS. Allons-y !

Qu'est-ce qu'un chargeur ?

Un chargeur est un élément animé qui indique que le contenu est en cours de traitement. Il garantit aux utilisateurs que l'application fonctionne, réduisant ainsi les risques de frustration pendant les temps de chargement.

Pourquoi utiliser un chargeur ?

• Améliore l'expérience utilisateur : il tient les utilisateurs informés en attendant.
• Améliore l'esthétique : un chargeur bien conçu peut donner à votre site Web un aspect plus professionnel.
• Empêche l'abandon des utilisateurs : en fournissant un retour visuel, les utilisateurs sont moins susceptibles de partir en attendant.

Étape 1 : Configuration de la structure HTML
Nous commencerons par la structure HTML de base de notre chargeur. Le code suivant crée un conteneur pour le chargeur avec douze barres.

Étape 2 : Style avec CSS
Ensuite, nous ajouterons du CSS pour styliser le chargeur. Voici le code pour créer un chargeur circulaire avec des barres animées.

`.loader {
position : relative ;
largeur : 54 px ;
hauteur : 54px ;
rayon de bordure : 10 px ;
>

.loader div {
largeur : 8%;
taille : 24%;
arrière-plan : rvb(128, 128, 128);
position : absolue ;
gauche : 50%;
haut : 30% ;
opacité : 0 ;
rayon de bordure : 50 px ;
box-shadow : 0 0 3px rgba(0,0,0,0.2);
animation : fade458 1s linéaire infini ;
>

@keyframes fade458 {
de {
opacité : 1 ;
>

à {
opacité : 0,25 ;
>
}`

Étape 3 : Ajout d'une animation
Nous appliquerons des délais de rotation et d'animation à chaque barre pour créer un effet de chargement dynamique.

`.loader .bar1 {
transformer : rotation(0deg) translation(0, -130%);
délai d'animation : 0 s ;
>

.loader .bar2 {
transformer : rotation (30 deg) translation (0, -130 %);
délai d'animation : -1,1 s ;
>

.loader .bar3 {
transformer : rotation (60 deg) translation (0, -130 %);
délai d'animation : -1s ;
>

.loader .bar4 {
transformer : rotation (90 deg) translation (0, -130 %);
délai d'animation : -0,9 s ;
>

.loader .bar5 {
transformer : rotation (120 deg) translation (0, -130 %);
délai d'animation : -0,8 s ;
>

.loader .bar6 {
transformer : rotation (150 deg) translation (0, -130 %);
délai d'animation : -0,7 s ;
>

.loader .bar7 {
transformer : rotation (180 deg) translation (0, -130 %);
délai d'animation : -0,6 s ;
>

.loader .bar8 {
transformer : rotation (210 deg) translation (0, -130 %);
délai d'animation : -0,5 s ;
>

.loader .bar9 {
transformer : rotation (240 deg) translation (0, -130 %);
délai d'animation : -0,4 s ;
>

.loader .bar10 {
transformation : rotation (270 degrés) translation (0, -130 %);
délai d'animation : -0,3 s ;
>

.loader .bar11 {
transformer : rotation (300 deg) translation (0, -130 %);
délai d'animation : -0,2 s ;
>

.loader .bar12 {
transformer : rotation (330 deg) translation (0, -130 %);
délai d'animation : -0,1 s ;
}`

Étape 4 : Intégrer le chargeur dans votre site Web
Pour utiliser le chargeur dans votre projet Web, assurez-vous d'inclure le HTML et le CSS dans vos fichiers. Placez le balisage HTML du chargeur à l'emplacement souhaité et le chargeur apparaîtra pendant les processus de chargement.

Conclusion

La création d'un chargeur peut améliorer considérablement l'expérience utilisateur de votre site Web. Avec du HTML et du CSS simples, vous pouvez créer un chargeur visuellement attrayant et fonctionnel. Expérimentez avec les couleurs et les tailles pour les adapter au design de votre site Web !

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!