Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie einen Skeleton Loader mit CSS und verbessern die UX Ihrer App
So erstellen Sie einen Skeleton Loader mit CSS und verbessern die UX Ihrer App
- DDDOriginal
- 2025-01-24 06:07:10788Durchsuche
Verleihen Sie Ihrer Website mit Skeleton Loadern eine professionelle Note! Wenn Sie in der Frontend-Entwicklung arbeiten, vergessen Sie langweilige Loading-Spinner. Skelettlader bieten ein wesentlich attraktiveres und effizienteres Benutzererlebnis. In diesem Tutorial erfahren Sie, wie Sie ganz einfach eine solche mit HTML und CSS erstellen, ohne dass externe Bibliotheken erforderlich sind.
? Endergebnis
Bevor wir beginnen, zeigen wir Ihnen hier das Ergebnis, das wir erhalten werden:
Eine Karte, die das Laden eines Bildes, eines Titels und eines Textabsatzes simuliert. Schlicht, aber mit einem eleganten und professionellen Look.
? Vorteile von Skelettladern
- Größeres Geschwindigkeitsgefühl:Der Benutzer sieht beim Laden eine Darstellung des Inhalts, anders als bei einem einfachen Spinner.
- Anspruchsvolleres Design: Bietet eine Vorschau des Inhalts und vermeidet so das Gefühl, dass die Anwendung fehlgeschlagen ist.
- Einfache Implementierung:Erstellt mit reinem CSS, ohne zusätzliche Komplexität.
✍️ Machen wir uns an die Arbeit: Erstellen des Loaders
Wir erstellen einen Loader, der eine Karte mit Bild, Titel und Text imitiert.
1. Basis-HTML-Struktur
Erstellen Sie zunächst eine HTML-Datei mit der folgenden Struktur:
<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-Stile
Erstellen Sie eine Datei styles.css mit dem folgenden 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-Erklärung
- Farben und Ränder:Ein helles Grau (#e0e0e0) und abgerundete Kanten werden verwendet, um ein echtes Element zu simulieren.
-
Glitzereffekt: Das
linear-gradienterzeugt den animierten Leuchteffekt mit@keyframes shimmer. - Realistische Proportionen: Die Abmessungen jedes Elements (Bild, Titel, Text) sind so definiert, dass sie echten Inhalten ähneln.
4. Echten Inhalt anzeigen (optional)
Um den tatsächlichen Inhalt nach einer Weile anzuzeigen, fügen Sie diesen JavaScript-Code in eine Datei ein 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>
Fügen Sie innerhalb des .card-Elements in Ihrem HTML die Klassen .skeleton, .skeleton.image, .skeleton.title und .skeleton.text entsprechend für jedes Element hinzu, das Sie als Loader anzeigen möchten.
? Fazit
Skeleton-Lader sind eine einfache und effektive Möglichkeit, das Benutzererlebnis zu verbessern und Ihrer Anwendung den Eindruck von Geschwindigkeit und Professionalität zu verleihen. Probieren Sie es in Ihren Projekten aus!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Skeleton Loader mit CSS und verbessern die UX Ihrer App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!