Comment créer un Skeleton Loader avec CSS et améliorer l'UX de votre application-tutoriel CSS-php.cn

Comment créer un Skeleton Loader avec CSS et améliorer l'UX de votre application

DDD

Libérer： 2025-01-24 06:07:10

original

850 Les gens l'ont consulté

Donnez une touche professionnelle à votre site Web avec des chargeurs squelettes ! Si vous travaillez dans le développement front-end, oubliez le chargement ennuyeux des fileuses. Les chargeurs squelettes offrent une expérience utilisateur beaucoup plus attrayante et efficace. Dans ce tutoriel, vous apprendrez à en créer un facilement avec HTML et CSS, sans avoir besoin de bibliothèques externes.

? Résultat final

Avant de commencer, nous vous montrons ici le résultat que nous obtiendrons :

Cómo crear un Loader Esqueleto con CSS y mejorar la UX de tu app

Une carte qui simule le chargement d'une image, d'un titre et d'un paragraphe de texte. Simple, mais avec un look élégant et professionnel.

? Avantages des chargeurs squelettes

Plus grande sensation de vitesse : L'utilisateur visualise une représentation du contenu pendant son chargement, contrairement à un simple spinner.
Conception plus sophistiquée : Fournit un aperçu du contenu, évitant le sentiment que l'application a échoué.
Mise en œuvre facile : Créé avec du CSS pur, sans complexités supplémentaires.

✍️ Au travail : Création du Loader

Nous allons créer un chargeur qui imite une carte avec image, titre et texte.

1. Structure HTML de base

Commencez par créer un fichier HTML avec la structure suivante :

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Loader</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <!-- Contenido del loader aquí -->
  </div>
  <script src="script.js"></script> </body>
</html>

Copier après la connexion

2. Styles CSS

Créez un fichier styles.css avec le code CSS suivant :

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.card {
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.skeleton.image {
  width: 100%;
  height: 150px;
  margin-bottom: 16px;
}

.skeleton.title {
  width: 70%;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton.text {
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}

Copier après la connexion

3. Explication CSS

Couleurs et bordures : Un gris clair (#e0e0e0) et des bords arrondis sont utilisés pour simuler un élément réel.
Effet pailleté : Le linear-gradient crée l'effet de lueur animé avec @keyframes shimmer.
Proportions réalistes : Les dimensions de chaque élément (image, titre, texte) sont définies pour qu'elles ressemblent au contenu réel.

4. Afficher le contenu réel (facultatif)

Pour afficher le contenu réel après un certain temps, ajoutez ce code JavaScript dans un fichier script.js :

setTimeout(() => {
  document.querySelector('.card').innerHTML = `
    <img src="https://via.placeholder.com/300x150" alt="Imagen de ejemplo">
    <h3>Título del contenido</h3>
    <p>Este es un texto de ejemplo para la tarjeta.</p>
  `;
}, 3000); // Simula una carga de 3 segundos

Copier après la connexion

Dans l'élément .card de votre HTML, ajoutez les classes .skeleton, .skeleton.image, .skeleton.title et .skeleton.text selon le cas pour chaque élément que vous souhaitez afficher en tant que chargeur.

? Conclusion

Les chargeurs squelettes sont un moyen simple et efficace d'améliorer l'expérience utilisateur, donnant une impression de rapidité et de professionnalisme à votre application. Essayez-le dans vos projets !

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!