Result
ユーザーに優しいとウワサのローディング時のスケルトンスクリーンを殆どCSS、ほんの少しのJavaScriptで実装する、というもの。
JavaScriptは表示の切り替えの為にclassを削除するためだけに使っていますので表示そのものはCSSで管理されています。
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; 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.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) ); animation: shimmer 2s infinite; content: "";}@keyframes shimmer { 100% { transform: translateX(100%); }} |
JavaScript
const skeletons = document.querySelectorAll(".skeleton");skeletons.forEach((skeleton) => { setTimeout(() => { skeleton.classList.remove("skeleton"); }, 4000);}); |
サンプル用に用意された便宜上のものです。実装時は適したコードに変更してください。
html
<div class="profile-container"> <div class="profile-images"> <div class="cover-img skeleton"> <img src="https://picsum.photos/800/400"> </div> <div class="profile-img skeleton"> <img src="https://picsum.photos/100/100" alt="Photo by Ian Dooley on Unsplash"> </div> </div> <div class="profile-text"> <h1 class="skeleton">hogehoge</h1> <p class="skeleton">hugahuga foo bar piyopiyo</p> <h5 class="skeleton">Tokyo, Osaka, Fukuoka<a class="skeleton" href="#">お問い合わせ</a></h5> <p class="skeleton"><a class="skeleton" href="#">534 コメント</a></p> </div> <div class="profile-cta"> <a class="message-btn skeleton" href="#">DMを送る</a> <a class="more-btn skeleton" href="#">プロフィール</a> </div></div> |
スケルトンスクリーンにしたい場所にskeletonというclassを付与。
via
How to Create a Skeleton Screen Loading Effect in HTML, CSS, and JavaScript
