css实现loading效果

最新推荐文章于 2025-05-18 09:40:35 发布

zhanghuiyu01

最新推荐文章于 2025-05-18 09:40:35 发布

阅读量698

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/zhanghuiyu01/article/details/80825713

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS3及JavaScript实现的加载动画效果。通过定义特定的CSS3动画，结合HTML结构和JavaScript控制显示隐藏，可以轻松地为网站增加加载提示。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

  <!--动画效果-->
  <div id="popWindow" class="popWindow" style="display: none">
            <div class="spinner" id="spinner">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
                <div class="rect5"></div>
            </div>
        </div>
  <!--蒙版-->
  <div id="maskLayer" class="maskLayer" style="display: none;"></div>

css样式

.spinner {
    margin: 0px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #29B7BF;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}  20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.popWindow {
    text-align: center;
    z-index: 10002;
    width: 500px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;
    position: fixed;
}
.head-box {
    width: 500px;
    height: 25px;
    background: #4A4AFF;
}
.maskLayer {
    background-color: #9D9D9D;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    filter: alpha(opacity=50);
    opacity: 0.3;
    z-index: 10000;
    position: fixed;
}

js方法

function showLoading() {
    document.getElementById('popWindow').style.display = 'block';
    document.getElementById('maskLayer').style.display = 'block';
}

function closeLoading() {
    document.getElementById('popWindow').style.display = 'none';
    document.getElementById('maskLayer').style.display = 'none';
}