Geri Dön

Skeleton Loader

Havalı Animasyonlar / 2 Görüntülenme

Favoriye Ekle

Canlı Önizleme

Nasıl Kullanılır?

'shimmer' animasyonu sayesinde sonsuz ışık yansıması elde ediliyor. API istekleri sırasında bekleme ekranları için birebir.

Kaynak Kodlar

HTML

<div class="skeleton-card">
  <div class="skeleton skeleton-img"></div>
  <div class="skeleton-content">
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width:70%;"></div>
    <div class="skeleton skeleton-text" style="width:40%;"></div>
  </div>
</div>

CSS

.skeleton-card { width: 300px; background: #2a2a35; border-radius: 10px; overflow: hidden; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.skeleton { background: #383846; position: relative; overflow: hidden; border-radius: 4px; }
.skeleton::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0)); animation: shimmer 2s infinite; }
.skeleton-img { width: 100%; height: 150px; margin-bottom: 20px; border-radius: 8px; }
.skeleton-text { height: 12px; margin-bottom: 10px; width: 100%; }
@keyframes shimmer { 100% { transform: translateX(100%); } }