element-ui 自定义loading 图片

kn
2023-04-11 15:02:58
前端

.el-loading-mask{
    z-index: 9999999 !important;
    background-color: rgba(255,255,255,.8) !important;
}
.el-loading-spinner .circular{
    width: 42px;
    height: 42px;
    animation: loading-rotate 2s linear infinite;
    display: none;
}
.el-loading-spinner{
    /* 图片替换为你自定义的即可 */
    background: url('/img/loading.png') no-repeat;
    animation: loading_rotate 1s linear infinite;
    background-size: 48px 48px;
    width: 48px;
    height: 48px;
    position: relative;
    top: 50%;
    left: 50%;
}
@keyframes loading_rotate {
    0%{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
    25%{
        transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
    }
    50%{
        transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
    }
    75%{
        transform:rotate(270deg);
        -webkit-transform:rotate(270deg);
    }
    100%{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }
}

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏