Online Experience Address https://jsfiddle.net/z13wtr0q/

First of all, advantages and disadvantages, after all, there are many schemes for skeleton screen implementation.

Advantage

• Simple, no engineering, no puppeteer generation skeleton dom, no secondary development and maintenance
• High degree of customization, do what you want
• Not bulky, just give you what you want.

shortcoming

• Low level of automation, need to add classes manually on skeleton dom
• Collaboration is demanding, unlike engineering, which can be constrained by engineering.

thinking

Skeleton style is realized by pseudo-elements and dynamic switching between skeleton and page is realized by operation style.

Realization

css part (scss writing)

Skeleton styles are generated by after pseudo elements and are covered by absolute over the actual elements

  .skt-loading {
    pointer-events: none; /* Blocking events in loading */
    .skeleton {
      position: relative;
      overflow: hidden;
      border: none !important;
      border-radius: 5px;
      background-color: transparent !important;
      background-image: none !important;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background-color: #EBF1F8;
        display: block;
      }
      
      /* The following sections are all customized. See Requirements Modification */
      &:not(.not-round)::after {
        border-radius: 4px;
      }
      &:not(.not-before)::before {
        position: absolute;
        top: 0;
        width: 30%;
        height: 100%;
        content: "";
        background: linear-gradient(to right,rgba(255,255,255,0) 0,
            rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
        transform: skewX(-45deg);
        z-index: 99;
        animation: skeleton-ani 1s ease infinite;
        display: block;
      }
      &.badge {
        &::after {
          background-color: #F8FAFC;
        }
      }
    }
  }

  @keyframes skeleton-ani { /* Skeleton Screen Animation */
    from {
      left: -100%;
    }
    to {
      left: 150%;
    }
  }

Part html

Just add the skeleton class to the skeleton granularity element that you think is reasonable

Part js

Control the switching of skt-loading class

Use note

• after pseudo-elements cannot be inserted into non-container elements such as inputimg, so if you need to add skleton, you need to wrap it with another layer of elements.
• For data-driven pages like vuereact, mock data is needed to generate dom

Welcome to throw a brick