css实现loading效果

本文介绍了一种使用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';
}

更多加载效果参考
https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值