For the front end, the most important thing is the user experience. This time, let’s talk about the Skeleton Screen

We usually use loading animation to request loading content, such as putting a chrysanthemum chart in the content area. When the request ends and the render tree construction is completed, the chrysanthemum chart is removed to show the content that the user wants to see. While there are no drawbacks to this approach, more sites are using skeleton screens instead because they offer a better user experience. Let’s look at a few examples:

facebook

jira

linkedin

slack

In the illustration above, we can see a change from skeleton to actual content for each site. If you are more careful, you will notice that the location of the block in the skeleton diagram varies from site to site:

  • Facebook uses a user’s fixed profile picture, author, date, and a small portion of text as the skeleton body
  • Jira has a neat match between the title and logo
  • Linkedin doesn’t align at all and uses a more show-skeleton layout
  • Slack uses mixed loading mode, including skeleton graph and rotating circle. Moreover, slack does not use the same gray value for all blocks, and the color of different blocks represents the font color of this area, which is another improvement of smoothness of switching.

However, they all have one thing in common, that is, they adopt a simple layout. We can take this as an example to create a unique style to improve user experience and strengthen the brand style. I think this will bring better effects than loading a logo.

With a brief introduction to the skeleton diagram above, let’s talk about the implementation.

First, we implement a simple skeleton structure with loading effect:


      
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>* {margin: 0;
           padding: 0;
       }
       @keyframes loading {
           0% {
               background-position: -400px 0100%} {background-position: 400px 0}}.box1 {
           position: absolute;
           margin: 0 auto;
           left: 50%;
           margin-left: -400px;
           top: 0;
           width: 800px;
           height: 60px;
           background-color: blue;
           background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
           animation-duration: 1s;
           animation-iteration-count: infinite;
           animation-name: loading;
           animation-timing-function: linear;
           transition: 0.3 s;
       }
       .bgMasker {
           background-color: #fff;
       }

       .line1 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 0;
           top: 0;
           left: 60px;
       }

       .line2 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 700px;
           top: 20px;
           left: 60px;
       }

       .line3 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 400px;
           right: 0;
           top: 20px;
       }

       .line4 {
           background-color: #fff;
           height: 20px;
           top: 40px;
           position: absolute;
           left: 60px;
           right: 500px;
       }

       .line5 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 600px;
           right: 0;
           top: 40px;
       }
   </style>
</head>

<body>
   <! Skeleton -- - >
   <div class="box1">
       <div class="bgMasker line1"></div>
       <div class="bgMasker line2"></div>
       <div class="bgMasker line3"></div>
       <div class="bgMasker line4"></div>
       <div class="bgMasker line5"></div>
   </div>
</body>

</html>
Copy the code

One thing needs to be mentioned, because we use gradient animation, so our layout has a little change, we use the whole with the background color, and then the content uses positioning and left,right to form blocks, please refer to the above code for details

The effect is as follows:

Then we do a simple skeleton diagram and the content of the switch, there is no code pasted here, there are many ways to switch, not fixed thinking. I have made two kinds of switch, one is direct switch, the other is fade switch, you can simply refer to:

Ele. me skeleton diagram scheme

  1. SSR, after request, puppeteer inserts script to generate the skeleton of the current page, or directly during build, then inserts it into the root element, then hides and displays the real data directly after the data is loaded
  2. Block, for images, a solid color GIF with a minimum size of 1 * 1 will be taken and stretched
  3. The skeleton is hidden after the data request