SCALE — Build Lab

スケルトンのシマー(光る)

マイクロインタラクション

スケルトンに左→右へ流れる光のグラデで「読込中」を伝える。

実装例
css
.skeleton { background: linear-gradient(90deg, #1a1a26 0%, #232333 50%, #1a1a26 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

スケルトンのシマー(光る)

:LiTarget: 原則

スケルトンに左→右へ流れる光のグラデで「読込中」を伝える。

:LiCode: 実装例

.skeleton { background: linear-gradient(90deg, #1a1a26 0%, #232333 50%, #1a1a26 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }