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

If you are interested in programmers, web front-end, want to know about learning, and want to know more about friends in this industry, you can add our front-end learning button qun: 784783012. Whether you are a student or a friend who wants to change careers, I welcome you to share dry goods from time to time, and organize a new web front-end Learning Fund of 2019. Material 0 and basic introductory course to share with you, We are serious about learning the front-end.

• 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