骨架屏
在加载完成之前显示的骨架屏样式
骨架屏是一种加载的状态，在内容显示之前的过渡状态。系统推荐两种骨架屏的组件，以及相应的变体。
以下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;
}
The skeleton block is a simple block element with a pulsating background. It has a minimum height of 4.5em.
Example
HTML
<div class="skeleton-block"></div>If you insert text inside this block, you can make its height responsive:
Example
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>行类型的骨架屏体现为段落paragraph，每个<div></div>元素占用单独的一行。
Example
HTML
<div class="skeleton-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>大多数元素和组件自动匹配了骨架屏变体，可以通过使用is-skeleton 或是 has-skeleton来进行激活。
Example
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>Example
HTML
<span class="icon is-skeleton">
<i class="fas fa-reply"></i>
</span>Example
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>Example
John Smith @johnsmith 31m
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>Example
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>Example
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>Example
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>Example
HTML
<h1 class="title is-skeleton">
Title
</h1>Example
HTML
<h1 class="title has-skeleton">
Title
</h1>Example
HTML
<h2 class="subtitle is-skeleton">
Subtitle
</h2>Example
HTML
<h2 class="subtitle has-skeleton">
Subtitle
</h2>Example
HTML
<h1 class="title is-skeleton">
Title
</h1>
<h2 class="subtitle is-skeleton">
Subtitle
</h2>Example
HTML
<h1 class="title has-skeleton">
Title
</h1>
<h2 class="subtitle has-skeleton">
Subtitle
</h2>Example
HTML
<input class="input is-skeleton">Example
HTML
<textarea class="textarea is-skeleton"></textarea>