手写骨架屏

手写骨架屏

在公共样式里书写如下css

/* Skeletons效果 */
.dom_loading {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    min-height: 16px;
    border-radius: 4px;
}
.dom_loading::after {
    display: block;
    content: "";
    position: absolute;
    top: -30%;
    width: 20px;
    height: 200%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgb(202, 202, 202), transparent);
    animation-duration: 2s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
    animation: loading 2s linear infinite;
    z-index: 10;
}
.dom_loading::before { /* 这块样式是覆盖内容的，如果不需要覆盖内容可以不要这个伪元素 */
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    min-height: 16px;
    background-color: #b7b7b7;
    border-radius: 4px;
    z-index: 9;
}
@keyframes loading {
    /* 骨架屏动画 */
    from {
        -webkit-transform: translateX(-100px) rotateZ(45deg);
        transform: translateX(-100px) rotateZ(45deg);
    }
    to {
        -webkit-transform: translateX(1000px) rotateZ(45deg);
        transform: translateX(1000px) rotateZ(45deg);
    }
}

然后在需要骨架屏的地方根据数据拿到之前，添加‘dom_loading’ 的 class，该元素必须具有真实的宽高

最后效果：