Framework

Skeleton

Copy page

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

Code
  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

Code
<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: 0.4;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.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

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

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

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

You can find removeSkeleton on page instance too

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