Home >Web Front-end >CSS Tutorial >How to create a Skeleton Loader with CSS and improve the UX of your app
How to create a Skeleton Loader with CSS and improve the UX of your app
- DDDOriginal
- 2025-01-24 06:07:10787browse
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:
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>
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>
3. CSS Explanation
- Colors and borders: A light gray (#e0e0e0) and rounded edges are used to simulate a real element.
-
Glitter Effect: The
linear-gradientcreates 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>
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!