骨架
Framework7 附带 Skeleton Elements 库（也被称为 UI Skeletons、Skeleton Screens、Ghost Elements）- 用于增强感知性能的 UI。
Skeleton Elements 库已集成到 Framework7 中，无需单独安装。有关完整 API 文档和更多示例，请查看官方 Skeleton Elements 文档。
Skeleton 块
Skeleton 块只是一个带有灰色背景色的普通块元素，可以具有任何所需大小。
要创建 Skeleton 块元素，我们只需要创建一个具有 fixed 宽度（最好）的 skeleton-block 类 div 元素。
...
<div class="list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">
<!-- Use skeleton block instead of list item title -->
<div class="skeleton-block" style="width: 100px"></div>
</div>
</div>
</li>
</ul>
</div>
...
Skeleton 文本
Skeleton 文本更有趣。Framework7 附带特殊内置的 Skeleton 字体，将每个字符渲染成小的灰色矩形。当我们将 skeleton-text 类应用到任何元素时，它会将文本转换为灰色块/行。相对于 skeleton-block 的优势在于这种“skeleton 文本”可以完全响应，并且其大小会反映实际文本大小。
Skeleton 文本字体支持以下字符集（包括“空格”）
0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z _ - . , : ; / ! / * & ' " | ( ) { } [ ]...
<div class="list media-list">
<ul>
<!-- we just add "skeleton-text" class to list item and its text will be rendered as gray boxes -->
<li class="item-content skeleton-text">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Item Title</div>
</div>
<div class="item-subtitle">Item Subtitle</div>
<div class="item-text">Item text goes here, and it will be rendered as gray box too.</div>
</div>
</li>
<!-- In the next item we use "_" character instead of actual text -->
<li class="item-content skeleton-text">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">____ _____</div>
</div>
<div class="item-subtitle">____ _______</div>
<div class="item-text">____ ____ ____ _____ ___ __ ____ __ ________ __ ____ ___ ____</div>
</div>
</li>
</ul>
</div>
...
Skeleton 效果
Skeleton 元素还支持三种动画效果：Fade、Wave 和 Pulse。
要启用特殊的 Skeleton 动画效果，我们可以需要将以下类之一添加到 Skeleton 元素，或包含 Skeleton 元素的父元素
- skeleton-effect-fade - 添加淡入效果
- skeleton-effect-wave - 添加波动效果
- skeleton-effect-pulse - 添加脉冲效果
CSS 变量
以下是相关的 CSS 变量（自定义 CSS 属性）列表。
:root {
--skeleton-color: #ccc;
--skeleton-icon-color: rgba(0, 0, 0, 0.25);
}
.dark {
--skeleton-color: #515151;
--skeleton-icon-color: rgba(255, 255, 255, 0.25);
}
示例
skeleton.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Skeleton Elements</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong-ios block-outline-ios">
<p>Skeleton (or Ghost) elements designed to improve perceived performance and make app feels faster.</p>
<p>Framework7 comes with two types of such elements: Skeleton Block and Skeleton Text. Skeleton block is a gray
box that can be used as placeholder for any element. Skeleton text uses special built-in skeleton font to
render each character of such text as gray rectangle. Skeleton text allows to make such elements responsive
and feel more natural.</p>
<p>It can be used in any places and with any elements.</p>
</div>
<div class="block-title">Skeleton List</div>
<div class="list list-strong-ios list-outline-ios list-dividers-ios media-list skeleton-text">
<ul>
<li class="item-content">
<div class="item-media">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Title</div>
</div>
<div class="item-subtitle">Subtitle</div>
<div class="item-text">
Placeholder text line 1<br />
Text line 2
</div>
</div>
</li>
<li class="item-content">
<div class="item-media">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Title</div>
</div>
<div class="item-subtitle">Subtitle</div>
<div class="item-text">
Placeholder text line 1<br />
Text line 2
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Skeleton Card</div>
<div class="card card-outline skeleton-text">
<div class="card-header">Card Header</div>
<div class="card-content card-content-padding">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit.</div>
<div class="card-footer">Card Footer</div>
</div>
<div class="block-title">Loading Effects</div>
<div class="block block-strong-ios block-outline-ios">
<p>It supports few loading effects:</p>
<p class="grid grid-cols-3 grid-gap">
<a class="button button-fill button-small button-round" @click=${()=> load('fade')}>Fade</a>
<a class="button button-fill button-small button-round" @click=${()=> load('wave')}>Wave</a>
<a class="button button-fill button-small button-round" @click=${()=> load('pulse')}>Pulse</a>
</p>
</div>
<div class="list list-strong-ios list-outline-ios list-dividers-ios media-list">
<ul>
${loading ? $h`
<li class="item-content skeleton-text skeleton-effect-${effect}">
<div class="item-media">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Full Name</div>
</div>
<div class="item-subtitle">Position</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
aliquet urna, nec imperdiet felis sapien at enim.</div>
</div>
</li>
<li class="item-content skeleton-text skeleton-effect-${effect}">
<div class="item-media">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Full Name</div>
</div>
<div class="item-subtitle">Position</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
aliquet urna, nec imperdiet felis sapien at enim.</div>
</div>
</li>
<li class="item-content skeleton-text skeleton-effect-${effect}">
<div class="item-media">
<div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Full Name</div>
</div>
<div class="item-subtitle">Position</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
aliquet urna, nec imperdiet felis sapien at enim.</div>
</div>
</li>
` : $h`
<li class="item-content">
<div class="item-media">
<img src="https://placeimg.com/80/80/people/1" style="width: 40px; height: 40px; border-radius: 50%" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe</div>
</div>
<div class="item-subtitle">CEO</div>
<div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac
interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis.
Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi
aliquet urna, nec imperdiet felis sapien at enim.</div>
</div>
</li>
<li class="item-content">
<div class="item-media">
<img src="https://placeimg.com/80/80/people/2" style="width: 40px; height: 40px; border-radius: 50%" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Jane Doe</div>
</div>
<div class="item-subtitle">Marketing</div>
<div class="item-text">Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac
iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum,
nibh nisi aliquet urna, nec imperdiet felis sapien at enim.</div>
</div>
</li>
<li class="item-content">
<div class="item-media">
<img src="https://placeimg.com/80/80/people/3" style="width: 40px; height: 40px; border-radius: 50%" />
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Kate Johnson</div>
</div>
<div class="item-subtitle">Admin</div>
<div class="item-text">Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet
felis sapien at enim.</div>
</div>
</li>
`}
</ul>
</div>
</div>
</div>
</template>
<script>
export default (props, { $update }) => {
let loading = false;
let effect = null;
const load = (newEffect) => {
if (loading) return;
effect = newEffect;
loading = true;
$update();
setTimeout(function () {
loading = false;
$update();
}, 3000);
}
return $render;
}
</script>