Maison >interface Web >tutoriel CSS >Comment créer un Skeleton Loader avec CSS et améliorer l'UX de votre application

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

DDDoriginal: 2025-01-24 06:07:10832parcourir

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 :

<code class="language-html"><!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></code>

2. Styles CSS

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

<code class="language-css">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;
}</code>

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 :

<code class="language-javascript">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</code>

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!

JavaScript css html date int JS idea Imagen ux

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Composant de classement par étoiles d'un élément HTML uniqueArticle suivant：Composant de classement par étoiles d'un élément HTML unique

Articles Liés

Voir plus