less实现骨架屏加载方案

.skeleton {

    /* 骨架动画 */
    @skeleton-style: {
        background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
    }

    /* 单行，通常用于标题这种单行块元素 */
    &-block:empty::before {
        display: inline-block;
        width: 100%;
        content: 'skeleton';
        text-indent: -999em;
        @skeleton-style();
    }

    /* 内敛，通常用于额外的小信息 */
    &-inline:empty::before {
        display: inline-block;
        content: 'skeleton';
        text-indent: -999em;
        width: 50%;
        @skeleton-style();
    }

    /* 多行，通常用于正文 */
    &-multi:empty {

        &::before {
            display: inline-block;
            width: 100%;
            content: 'skeleton';
            text-indent: -999em;
            margin-bottom: 0.2em;
            @skeleton-style();
        }

        &::after {
            display: inline-block;
            content: 'skeleton';
            text-indent: -999em;
            width: 50%;
            @skeleton-style();
        }

    }

    /* 动画 */
    @keyframes skeleton-loading {
        0% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0 50%;
        }
    }

}