Bulmaのスケルトン
ほとんどすべてのBulmaコンポーネントをスケルトンローダーに変換したり、あらかじめ構築されたユーティリティ要素を使用したりできます
スケルトンローダーは、インターフェース内のコンテンツのプレースホルダーとして機能するローディング状態です。 Bulma v1には、2つのスケルトン要素と、ほとんどのBulmaコンポーネントのスケルトンバリアントが付属しています。
すべてのスケルトンローダーは、これらのCSS変数を共有しています
:root {
--bulma-skeleton-background: var(--bulma-border);
--bulma-skeleton-radius: var(--bulma-radius-small);
--bulma-skeleton-block-min-height: 4.5em;
--bulma-skeleton-lines-gap: 0.75em;
--bulma-skeleton-line-height: 0.75em;
}
スケルトンブロックは、脈動する背景を持つシンプルなブロック要素です。最小高さは4.5emです。
例
HTML
<div class="skeleton-block"></div>このブロック内にテキストを挿入すると、その高さをレスポンシブにすることができます
例
HTML
<div class="skeleton-block">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Donec sed odio dui.
Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id
nibh ultricies vehicula ut id elit.
</div>スケルトンライン要素は、段落に似たローディング要素です。各<div></div>は、個別のローディングラインとしてレンダリングされます。
例
HTML
<div class="skeleton-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>ほとんどのBulma要素とコンポーネントには、is-skeletonまたはhas-skeleton修飾子を追加することで有効にできるスケルトンバリアントがあります。
例
HTML
<div class="buttons">
<button class="button is-skeleton">Button</button>
<button class="button is-link is-skeleton">Link</button>
<button class="button is-primary is-skeleton">Primary</button>
<button class="button is-success is-skeleton">Success</button>
<button class="button is-info is-skeleton">Info</button>
<button class="button is-warning is-skeleton">Warning</button>
<button class="button is-danger is-skeleton">Danger</button>
</div>例
HTML
<span class="icon is-skeleton">
<i class="fas fa-reply"></i>
</span>例
HTML
<figure class="image is-16x16 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/16x16">
</figure>
<figure class="image is-32x32 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/32x32">
</figure>
<figure class="image is-64x64 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/64x64">
</figure>
<figure class="image is-128x128 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/128x128">
</figure>例
ジョンスミス @johnsmith 31分前
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
HTML
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="content is-skeleton">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-reply"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-retweet"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-heart"></i></span></a>
</div>
</nav>
</div>
<div class="media-right">
<button aria-label="delete" class="delete is-skeleton"></button>
</div>
</article>例
HTML
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="field">
<p class="control">
<textarea class="textarea is-skeleton" placeholder="Add a comment..."></textarea>
</p>
</div>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info is-skeleton">Submit</a>
</div>
</div>
<div class="level-right">
<div class="level-item">
<label class="checkbox is-skeleton"> <input type="checkbox"> Press enter to submit </label>
</div>
</div>
</nav>
</div>
</article>例
HTML
<div class="notification is-skeleton">
Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</div>例
HTML
<span class="tag is-skeleton">Tag</span>
<span class="tag is-link is-skeleton">Link</span>
<span class="tag is-primary is-skeleton">Primary</span>
<span class="tag is-info is-skeleton">Info</span>
<span class="tag is-success is-skeleton">Success</span>
<span class="tag is-warning is-skeleton">Warning</span>
<span class="tag is-danger is-skeleton">Danger</span>例
HTML
<h1 class="title is-skeleton">
Title
</h1>例
HTML
<h1 class="title has-skeleton">
Title
</h1>例
HTML
<h2 class="subtitle is-skeleton">
Subtitle
</h2>例
HTML
<h2 class="subtitle has-skeleton">
Subtitle
</h2>例
HTML
<h1 class="title is-skeleton">
Title
</h1>
<h2 class="subtitle is-skeleton">
Subtitle
</h2>例
HTML
<h1 class="title has-skeleton">
Title
</h1>
<h2 class="subtitle has-skeleton">
Subtitle
</h2>例
HTML
<input class="input is-skeleton">例
HTML
<textarea class="textarea is-skeleton"></textarea>