Skip to main content

Skeleton

Skeleton screens are a popular technique for providing a better user experience by showing a rough layout of content before real content is loaded. In miniprogram, developers can configurate skeleton for their pages to improve user experience.

Start from SDK library version 4.11.0 and IDE version 2.32.0

Usage​

1. Create a skeleton folder in project root, with a config.json file​

  skeleton
  |--- page
  |    |--- index.html  // skeleton file
  |--- config.json  // page and skeleton mapping

2. Fill skeleton file by HTML and CSS code​

Hint We only keep a few tags and attributes in HTML, others will be ignored

Supported Tags

  • div
  • style
  • p

Supported Attrs

  • id
  • class
  • style
<div id="bn-skeleton">
  <style>
  html,
  body,
  p,
  #bn-skeleton {
    margin: 0;
    padding: 0;
  }
  
  #bn-skeleton,
  p {
    position: absolute;
  }
  
  #bn-skeleton {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  </style>
  <style>
  @keyframes blink {
    0% {
      opacity: .4;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      opacity: .4;
    }
  }
  
  .blink {
    animation-duration: 2s;
    animation-name: blink;
    animation-iteration-count: infinite;
  }
  </style>
  <p class="blink"
  style="z-index: 0;border-radius: 0% / 0%;background: rgb(255, 255, 255);width: 100%;padding-bottom: 16.41%;margin-top: 0%;">
  </p>
  <p class="blink"
  style="z-index: 3;border-radius: 50%;background: rgb(239, 239, 239);width: 6.154%;padding-bottom: 6.154%;left: 91.795%;margin-top: 5.128%;">
  </p>
  <p class="blink"
  style="z-index: 4;border-radius: 50%;background: rgb(239, 239, 239);width: 16.41%;padding-bottom: 6.154%;left: 4.103%;margin-top: 5.128%;">
  </p>
  <p class="blink"
  style="z-index: 5;border-radius: 50%;background: rgb(239, 239, 239);width: 5.128%;padding-bottom: 5.128%;left: 90.769%;margin-top: 22.051%;">
  </p>
  <p class="blink"
  style="z-index: 6;background: #EEEEEE;width: 24.615%;padding-bottom: 6.154%;left: 4.103%;margin-top: 21.538%;">
  </p>
  <p class="blink"
  style="z-index: 7;border-radius: 4.103% / 3.125%;background: rgb(255, 255, 255);width: 100%;padding-bottom: 131.282%;margin-top: 36.923%;">
  </p>
  <p class="blink"
  style="z-index: 10;border-radius: 0% / 0%;background: rgb(255, 255, 255);width: 91.795%;padding-bottom: 104.615%;left: 4.103%;margin-top: 53.333%;">
  </p>
  <p class="blink"
  style="z-index: 11;border-radius: 53.763% / 208.333%;background: rgb(245, 245, 245);width: 23.846%;padding-bottom: 6.154%;left: 72.051%;margin-top: 53.333%;">
  </p>
  <p class="blink"
  style="z-index: 14;border-radius: 1.117% / 4%;background: rgb(245, 245, 245);width: 91.795%;padding-bottom: 25.641%;left: 4.103%;margin-top: 65.641%;">
  </p>
  <p class="blink"
  style="z-index: 15;background: #EEEEEE;width: 22.708%;padding-bottom: 3.077%;left: 69.087%;margin-top: 70.256%;">
  </p>
  <p class="blink"
  style="z-index: 16;border-radius: 50.165% / 138.889%;background: rgb(255, 255, 255);width: 25.557%;padding-bottom: 9.231%;left: 66.238%;margin-top: 77.949%;">
  </p>
  <p class="blink"
  style="z-index: 21;border-radius: 50%;background: rgb(245, 245, 245);width: 10.256%;padding-bottom: 10.256%;left: 44.872%;margin-top: 97.436%;">
  </p>
  <p class="blink"
  style="z-index: 23;border-radius: 1.117% / 4%;background: rgb(245, 245, 245);width: 91.795%;padding-bottom: 25.641%;left: 4.103%;margin-top: 113.846%;">
  </p>
  <p class="blink"
  style="z-index: 24;background: #EEEEEE;width: 24.463%;padding-bottom: 3.077%;left: 67.332%;margin-top: 118.462%;">
  </p>
  <p class="blink"
  style="z-index: 25;border-radius: 47.897% / 138.889%;background: rgb(255, 255, 255);width: 26.767%;padding-bottom: 9.231%;left: 65.028%;margin-top: 126.154%;">
  </p>
  <p class="blink"
  style="z-index: 30;border-radius: 1.117% / 8.333%;background: rgb(239, 239, 239);width: 91.795%;padding-bottom: 12.308%;left: 4.103%;margin-top: 145.641%;">
  </p>
  <p class="blink"
  style="z-index: 31;border-radius: 0% / 0%;background: rgb(255, 255, 255);width: 100%;padding-bottom: 50.256%;margin-top: 168.205%;">
  </p>
  <p class="blink"
  style="z-index: 32;background: #EEEEEE;width: 81.769%;padding-bottom: 3.59%;left: 12.308%;margin-top: 183.333%;">
  </p>
  <p class="blink"
  style="z-index: 33;border-radius: 50%;background: rgb(146, 154, 165);width: 4.103%;padding-bottom: 4.103%;left: 4.103%;margin-top: 183.59%;">
  </p>
  <p class="blink"
  style="z-index: 34;border-radius: 50%;background: rgb(239, 239, 239);width: 3.077%;padding-bottom: 3.077%;left: 4.615%;margin-top: 184.103%;">
  </p>
  <p class="blink"
  style="z-index: 35;background: #EEEEEE;width: 81.769%;padding-bottom: 3.59%;left: 12.308%;margin-top: 196.667%;">
  </p>
  <p class="blink"
  style="z-index: 36;border-radius: 50%;background: rgb(146, 154, 165);width: 4.103%;padding-bottom: 4.103%;left: 4.103%;margin-top: 196.923%;">
  </p>
  <p class="blink"
  style="z-index: 37;border-radius: 50%;background: rgb(239, 239, 239);width: 3.077%;padding-bottom: 3.077%;left: 4.615%;margin-top: 197.436%;">
  </p>
  <p class="blink"
  style="z-index: 38;background: #EEEEEE;width: 81.769%;padding-bottom: 3.59%;left: 12.308%;margin-top: 210%;"></p>
  <p class="blink"
  style="z-index: 39;border-radius: 50%;background: rgb(146, 154, 165);width: 4.103%;padding-bottom: 4.103%;left: 4.103%;margin-top: 210.256%;">
  </p>
  <p class="blink"
  style="z-index: 40;border-radius: 50%;background: rgb(239, 239, 239);width: 3.077%;padding-bottom: 3.077%;left: 4.615%;margin-top: 210.769%;">
  </p>
</div>

3. Add mapping of pages and skeletons in config.json​

{
    "pages/index/index": "skeleton/page/index",
    "pages/list/list": "skeleton/page/index"
}

4. After page ready, using this.removeSkeleton() remove skeleton​

{
  onLoad() {
    // request data
    getData().then((pageData) => {
      this.setData({
        pageData
      }, () => {
        this.removeSkeleton && this.removeSkeleton();
      });
    });
  }
}

You can find removeSkeleton on page instance too

const pages = globalThis.getCurrentPages()
const current = pages[pages.length - 1]
current.removeSkeleton && current.removeSkeleton()