스켈레톤 화면 위로 밝은 빛줄기가 대각선으로 스쳐 지나가며 "로딩 중"임을 알리는 효과.
디자인 아틀라스<div class="card">
<div class="line w1"></div>
<div class="line w2"></div>
<div class="line w3"></div>
</div>.card{width:78%;display:grid;gap:10px}
.line{height:14px;border-radius:7px;background:var(--line);position:relative;overflow:hidden}
.w1{width:70%}.w2{width:100%}.w3{width:45%}
.line::after{content:'';position:absolute;inset:0;
background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--fg) 18%,transparent) 50%,transparent 70%);
background-size:200% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}}회색 블록 위에 그라데이션(투명 → 밝음 → 투명)을 background-image로 깔고, background-position을 애니메이션합니다. background-size를 실제 요소보다 훨씬 넓게 잡아야 빛줄기가 부드럽게 들어왔다 나갑니다.
단색으로 깜빡이는 pulse 스켈레톤보다 "뭔가 진행되고 있다"는 느낌을 더 잘 줘서, 실제 로딩 시간과 무관하게 체감 성능을 높입니다.
실제 로딩 시간이 1초 이상 걸릴 때만 씁니다. 즉시 뜨는 콘텐츠에 스켈레톤을 넣으면 오히려 느려 보입니다.