UI / 193
Skeleton loading
内容が入る前の形を見せる
読み込み中に、画像や文章が入る場所の輪郭を見せます。光が通り過ぎるシマーを加えると、待機状態がわかります。
見本の中を操作して変化を試してください。
ひとつ試すなら
待ち時間の見せ方を切り替える
こんなときに
実際にデータ取得が必要なカードや一覧。
仕組みと使い方
切り替えはデモ用です。実装では取得状態と結びつけ、永遠に読み込み中にしないこと。動きを減らす環境では光を動かしません。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<!doctype html><html lang="ja"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{margin:0;min-height:300px}.sample{box-sizing:border-box;min-height:210px;width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:18px;padding:24px;background:#efeee9;color:#202020;font-family:Arial,Meiryo,sans-serif;overflow:hidden}.sample *{box-sizing:border-box}.sample button{min-height:40px;border:1px solid #777;border-radius:999px;background:transparent;padding:9px 17px;font:12px Arial,Meiryo,sans-serif;color:inherit;cursor:pointer}.sample label{font-size:11px;display:grid;gap:8px;width:min(100%,220px)}.sample input{width:100%;accent-color:#222}.sample small{font-size:10px;line-height:1.6}.sample :focus-visible{outline:2px solid #222;outline-offset:4px}@media(prefers-reduced-motion:reduce){.sample *{animation:none!important;transition:none!important}}.skeleton-card{width:min(100%,250px);height:130px;background:white;padding:16px;border:1px solid #ddd;display:flex;gap:16px;align-items:center}.skeleton-image{width:64px;height:80px;background:#222;flex-shrink:0}.skeleton-copy{min-width:0;display:grid;gap:12px}.skeleton-copy b{font-size:15px}.skeleton-copy span{font-size:10px}.skeleton-card.changed .skeleton-image,.skeleton-card.changed .skeleton-copy>*{color:transparent;background:linear-gradient(110deg,#ddd 20%,#f5f5f5 45%,#ddd 70%);background-size:250% 100%;animation:skeleton-shine 1.6s linear infinite}.skeleton-card.changed .skeleton-copy>*{border-radius:3px}@keyframes skeleton-shine{to{background-position:-250% 0}}</style><div class="sample"><div class="skeleton-card"><div class="skeleton-image"></div><div class="skeleton-copy"><b>Something good.</b><span>見つける、その少し前。</span></div></div><button data-toggle=".skeleton-card" aria-pressed="false">読み込み状態を切り替える</button></div><script>const controller=(function controls(root){const abort=new AbortController();for(const input of root.querySelectorAll('[data-target]')){const update=()=>{const target=root.querySelector(input.dataset.target);if(input.dataset.attr)target.setAttribute(input.dataset.attr,input.value+(input.dataset.unit||''));else target.style.setProperty(input.dataset.prop,input.value+(input.dataset.unit||''));const output=input.closest('label')?.querySelector('output');if(output)output.textContent=input.value};input.addEventListener('input',update,{signal:abort.signal});update()}for(const button of root.querySelectorAll('[data-toggle]'))button.addEventListener('click',()=>{const target=root.querySelector(button.dataset.toggle),on=target.classList.toggle('changed');button.setAttribute('aria-pressed',String(on));},{signal:abort.signal});return {destroy(){abort.abort()},setAuto(){}}})(document);addEventListener('pagehide',()=>controller.destroy(),{once:true});</script></html>