2021年12月14日(火)

CSS+JavaScriptでローディング時にスケルトンスクリーン

• 0
• 6
• 1
• 0

Result

See the Pen
Untitled by kachibito (@kachibito)
on CodePen.

ユーザーに優しいとウワサのローディング時のスケルトンスクリーンを殆どCSS、ほんの少しのJavaScriptで実装する、というもの。

JavaScriptは表示の切り替えの為にclassを削除するためだけに使っていますので表示そのものはCSSで管理されています。

Ads

css

.skeleton { position: relative; width: max-content; overflow: hidden; border-radius: 4px; background-color: #1e2226 !important; color: transparent !important; border-color: #1e2226 !important; user-select: none; cursor: default; } .skeleton::after { position: absolute; ...