How to create a Skeleton Loader with CSS and improve the UX of your app-CSS Tutorial-php.cn

How to create a Skeleton Loader with CSS and improve the UX of your app

DDD

Release： 2025-01-24 06:07:10

Original

786 people have browsed it

Give a professional touch to your website with skeleton loaders! If you work in frontend development, forget about boring loading spinners. Skeleton loaders offer a much more attractive and efficient user experience. In this tutorial, you will learn how to create one easily with HTML and CSS, without the need for external libraries.

? Final Result

Before starting, here we show you the result we will obtain:

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

A card that simulates the loading of an image, a title and a paragraph of text. Simple, but with an elegant and professional look.

? Advantages of Skeleton Loaders

Greater sensation of speed: The user views a representation of the content while it loads, unlike a simple spinner.
More sophisticated design: Provides a preview of the content, avoiding the feeling that the application has failed.
Easy implementation: Created with pure CSS, without additional complexities.

✍️ Let's get to work: Creating the Loader

We will create a loader that imitates a card with image, title and text.

1. Base HTML Structure

Start by creating an HTML file with the following structure:

<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>

Copy after login

2. CSS styles

Create a file styles.css with the following CSS code:

<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>

Copy after login

3. CSS Explanation

Colors and borders: A light gray (#e0e0e0) and rounded edges are used to simulate a real element.
Glitter Effect: The linear-gradient creates the animated glow effect with @keyframes shimmer.
Realistic proportions: The dimensions of each element (image, title, text) are defined so that they resemble real content.

4. Show real content (optional)

To display the actual content after a while, add this JavaScript code in a file 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>

Copy after login

Within the .card element in your HTML, add the .skeleton, .skeleton.image, .skeleton.title and .skeleton.text classes as appropriate for each element you want to display as a loader.

? Conclusion

Skeleton loaders are a simple and effective way to improve the user experience, giving the impression of speed and professionalism to your application. Try it in your projects!

The above is the detailed content of How to create a Skeleton Loader with CSS and improve the UX of your app. For more information, please follow other related articles on the PHP Chinese website!