Skeleton screen scheme that can be implemented by css

Keywords: Javascript

Online Experience Address

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


  • 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.


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


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


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

Posted by Dan911 on Wed, 09 Oct 2019 22:10:03 -0700