loading 只加类名实现加载动画插入

Alan Lu Pop

已于 2023-05-21 19:24:26 修改

阅读量182

点赞数

分类专栏： HTML 文章标签：动画 css3 前端

于 2022-10-17 18:47:26 首次发布

本文链接：https://blog.csdn.net/paopao_pop/article/details/127372126

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现一个简单的loading加载动画

.loading {
    position: relative;
}

.loading[data-loading-open="open"]::after {
     z-index: 999; 
}

.loading[data-loading-open="open"]::before {
     z-index: 1000;
}

.loading[data-loading-open="open"]::before,
.loading[data-loading-open="open"]::after {
    opacity: 1;
    transition: all .3s ease;
}

.loading[data-loading-open="close"]::before,
.loading[data-loading-open="close"]::after {
    z-index: -1;
    opacity: 0;
    transition: all .3s ease;
}


.loading::before {
    content: '';
    width: 2.5vw;
    height: 2.5vw;
    border: 0.2604vw solid #cccccc;
    border-bottom-color: #00ffc3;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    position: absolute;
    top: calc((100vh / 2) - 1.7708vw);
    left: calc(50% - 1.7708vw);
    transform: translateX(-50%);
    z-index: 1000;
}

.loading::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    z-index: 999;
}


/* keyFrames */
@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

默认是打开的状态，也就是loading加载的状态

<body class="loading"></body>

页面加载完毕，js手动添加关闭loading

document.querySelector('body').setAttribute('data-loading-open','close');

大致的效果

Alan Lu Pop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
loading 只加类名实现加载动画插入

默认是打开的状态，也就是loading加载的状态。页面加载完毕，js手动添加关闭loading。实现一个简单的loading加载动画。
复制链接

扫一扫

专栏目录