← BACK TO CATALOG
EFFECT №008

SKELETON
LOADER

コンテンツの骨組みが脈打つように表示される。読み込み中の空白を、空間そのものの予告編に変える。

LOADING CSS

CUSTOMIZE

↻ LIVE PREVIEW
5 LINES

入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。

CODE

01 / 02

    
.skeleton-card {
  width: 520px;
  padding: 1.5rem;
}

.skeleton {
  height: 14px;
  background: linear-gradient(
    90deg,
    #E5E5E5 0%,
    #F5F5F5 50%,
    #E5E5E5 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  margin-bottom: 14px;
}

.skeleton.title  { height: 22px; width: 60%; margin-bottom: 24px; }
.skeleton.short  { width: 65%; }
.skeleton.medium { width: 85%; }
.skeleton.full   { width: 100%; }
.skeleton.last   { width: 40%; margin-bottom: 0; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #E5E5E5; }
}

  






  
AI PROMPT
02 / 02