Skeleton Generator
CSS-Skeleton-Ladebildschirme mit Shimmer- und Pulse-Animationen erstellen. Layout-Preset wählen und HTML + CSS kopieren.
① Layout-Preset auswählen ② Animation und Farben wählen ③ CSS und HTML kopieren
#2A2A2A
#3A3A3A
/* CSS */
.sk-bone {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-img { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 16px; }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-content { padding: 4px 0; }
.sk-card { max-width: 320px; }
.sk-list { display: flex; flex-direction: column; gap: 16px; }
.sk-list-item { display: flex; align-items: center; gap: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; }
.sk-article { max-width: 560px; }
.sk-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 240px; }
.sk-circle { width: 72px; height: 72px; border-radius: 50%; }
.sk-profile-info { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
@keyframes sk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes sk-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* HTML */
<div class="sk-card">
<div class="sk-img sk-bone"></div>
<div class="sk-content">
<div class="sk-line sk-bone" style="width:60%"></div>
<div class="sk-line sk-bone" style="width:90%"></div>
<div class="sk-line sk-bone" style="width:75%"></div>
</div>
</div>Was sind Skeleton-Bildschirme und warum sollte man sie verwenden?
Skeleton-Bildschirme sind UI-Platzhalter, die die Struktur von Inhalten während des Ladens nachahmen. Sie verbessern die wahrgenommene Leistung erheblich. Die Shimmer-Animation wendet einen beweglichen Gradienten via background-position an. Pulse verwendet eine opacity-Animation für einen Atemeffekt. Die Schlüsseltechnik ist eine .sk-bone-Klasse kombiniert mit border-radius.
Häufig gestellte Fragen
Ein Skeleton-Bildschirm ist ein UI-Platzhalter, der das Layout echter Inhalte vor dem Laden repliziert, mit vereinfachten Formen in gedämpften Farben.
Der Shimmer-Effekt wendet einen linearen Gradienten an und animiert background-position von -200% bis 200% horizontal, was die Illusion eines über das Element fegenden Lichts erzeugt.
Shimmer ist ausgefeilter und kommuniziert aktives Laden. Pulse ist einfacher und funktioniert besser mit komplexen Layouts oder dunklen Themes.
Kopiere die generierte HTML-Struktur und ersetze jedes .sk-bone div durch deine echten Inhaltselemente.
Der Standardansatz ist das bedingte Rendern entweder des Skeletons oder der echten Inhalte basierend auf einer Ladezustandsvariable.
Ja. Wende sk-shimmer oder sk-pulse selektiv auf bestimmte Bones an, für visuelle Abwechslung.
Ja, sie sind besonders effektiv auf Mobilgeräten, wo die Netzwerklatenz höher ist.