Skeleton - 图1

Skeleton

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are basically “gray box” representations of UI that will be available soon. They are designed to improve perceived performance.

Framework7 comes with two Skeleton patterns: Skeleton Block and Skeleton Text.

Skeleton Block

Skeleton block is just a usual block element with gray background color, that can be in any required size.

To create skeleton block element we just need to create div element with skeleton-block class and better with fixed width:

  1. ...
  2. <div class="list">
  3.   <ul>
  4.     <li class="item-content">
  5.       <div class="item-inner">
  6.         <div class="item-title">
  7.           <!-- Use skeleton block instead of list item title -->
  8.           <div class="skeleton-block" style="width: 100px"></div>
  9.         </div>
  10.       </div>
  11.     </li>
  12.   </ul>
  13. </div>
  14. ...

Skeleton Text

Skeleton text is more interesting thing. Framework7 comes with special built-in Skeleton font, that renders every character as small gray rectangle. When we apply skeleton-text class to any element, it converts text to gray blocks/lines. Advantage over skeleton-block is that such “skeleton text” can be fully responsive and its size will reflect actual text size.

Skeleton text font supports following characters set (including “space”):

  1. 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 z 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 Z X Y Z _ -   . , : ; / ! / * & ' " | ( ) { } [ ]
  1. ...
  2. <div class="list media-list">
  3.   <ul>
  4.     <!-- we just add "skeleton-text" class to list item and its text will be rendered as gray boxes -->
  5.     <li class="item-content skeleton-text">
  6.       <div class="item-inner">
  7.         <div class="item-title-row">
  8.           <div class="item-title">Item Title</div>
  9.         </div>
  10.         <div class="item-subtitle">Item Subtitle</div>
  11.         <div class="item-text">Item text goes here, and it will be rendered as gray box too.</div>
  12.       </div>
  13.     </li>
  14.     <!-- In the next item we use "_" character instead of actual text -->
  15.     <li class="item-content skeleton-text">
  16.       <div class="item-inner">
  17.         <div class="item-title-row">
  18.           <div class="item-title">____ _____</div>
  19.         </div>
  20.         <div class="item-subtitle">____ _______</div>
  21.         <div class="item-text">____ ____ ____ _____ ___ __ ____ __ ________ __ ____ ___ ____</div>
  22.       </div>
  23.     </li>
  24.   </ul>
  25. </div>
  26. ...

Skeleton Effects

Skeleton elements also support three animation effects: Fade, Blink and Pulse.

To enable special skeleton animation effect, we can need add one of the following classes to skeleton elements, or to parent element containing skeleton elements:

  • skeleton-effect-fade - to add fade effect
  • skeleton-effect-blink - to add blink effect
  • skeleton-effect-pulse - to add pulse effect

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

  1. :root {
  2.   --f7-skeleton-color: #ccc;
  3. }
  4. .theme-dark {
  5.   --f7-skeleton-color: #515151;
  6. }

Examples

  1. <template>
  2.   ...
  3.   <div class="block-title">Skeleton List</div>
  4.   <div class="list media-list skeleton-text">
  5.     <ul>
  6.       <li class="item-content">
  7.         <div class="item-media">
  8.           <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
  9.         </div>
  10.         <div class="item-inner">
  11.           <div class="item-title-row">
  12.             <div class="item-title">Title</div>
  13.           </div>
  14.           <div class="item-subtitle">Subtitle</div>
  15.           <div class="item-text">
  16.             Placeholder text line 1<br>
  17.             Text line 2
  18.           </div>
  19.         </div>
  20.       </li>
  21.       <li class="item-content">
  22.         <div class="item-media">
  23.           <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
  24.         </div>
  25.         <div class="item-inner">
  26.           <div class="item-title-row">
  27.             <div class="item-title">Title</div>
  28.           </div>
  29.           <div class="item-subtitle">Subtitle</div>
  30.           <div class="item-text">
  31.             Placeholder text line 1<br>
  32.             Text line 2
  33.           </div>
  34.         </div>
  35.       </li>
  36.     </ul>
  37.   </div>
  39.   <div class="block-title">Skeleton Card</div>
  40.   <div class="card skeleton-text">
  41.     <div class="card-header">Card Header</div>
  42.     <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>
  43.     <div class="card-footer">Card Footer</div>
  44.   </div>
  46.   <div class="block-title">Loading Effects</div>
  47.   <div class="block block-strong">
  48.     <p class="row">
  49.       <a href="#" class="col button button-fill button-small button-round" @click="load('fade')">Fade</a>
  50.       <a href="#" class="col button button-fill button-small button-round" @click="load('blink')">Blink</a>
  51.       <a href="#" class="col button button-fill button-small button-round" @click="load('pulse')">Pulse</a>
  52.     </p>
  53.   </div>
  54.   <div class="list media-list">
  55.     <ul>
  56.       {{#if loading}}
  57.       {{#each '123'}}
  58.         <li class="item-content skeleton-text skeleton-effect-{{../effect}}">
  59.           <div class="item-media">
  60.             <div class="skeleton-block" style="width: 40px; height: 40px; border-radius: 50%"></div>
  61.           </div>
  62.           <div class="item-inner">
  63.             <div class="item-title-row">
  64.               <div class="item-title">Full Name</div>
  65.             </div>
  66.             <div class="item-subtitle">Position</div>
  67.             <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>
  68.           </div>
  69.         </li>
  70.       {{/each}}
  71.       {{else}}
  72.       <li class="item-content">
  73.         <div class="item-media">
  74.           <img src="https://placeimg.com/80/80/people/1" style="width: 40px; height: 40px; border-radius: 50%">
  75.         </div>
  76.         <div class="item-inner">
  77.           <div class="item-title-row">
  78.             <div class="item-title">John Doe</div>
  79.           </div>
  80.           <div class="item-subtitle">CEO</div>
  81.           <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>
  82.         </div>
  83.       </li>
  84.       ...
  85.       {{/if}}
  86.     </ul>
  87.   </div>
  88.   ...
  89. </template>
  90. <script>
  91. return {
  92.   data: function () {
  93.     return {
  94.       loading: false,
  95.       effect: null,
  96.     }
  97.   },
  98.   methods: {
  99.     load: function (effect) {
  100.       var self = this;
  101.       if (self.loading) return;
  102.       self.$setState({
  103.         effect: effect,
  104.         loading: true,
  105.       });
  106.       setTimeout(function() {
  107.         self.$setState({ loading: false });
  108.       }, 3000);
  109.     }
  110.   }
  111. }
  112. </script>