h5 基于jq加载中动画

1 篇文章 0 订阅
1 篇文章 0 订阅

js动态插入执行方法()

function loadingAnimation(){
    var loading =  '<div class="loading_box">\
        <div class="loading_content">\
            <div class="loading_list">\
                <div class="loading_div"></div>\
            </div>\
            <div class="loading_list">\
                <div class="loading_div"></div>\
            </div>\
            <div class="loading_list">\
                <div class="loading_div"></div>\
            </div>\
    </div>';
    $("body").append(loading);
}

关闭动画

function closeLoading(){
    $(".loading_box").remove();
}

css样式

/*加载中*/
.loading_box{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1000;
}

.loading_box img{
    width:1rem;
    height:1rem;
    position: fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}
.loading_content{
    position: fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}
.loading_list{
    float:left;
    overflow: hidden;
    width:0.5rem;
    height:0.5rem;
    text-align: center;
    font-size:0;
    position: relative;
}
.loading_div{
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
    margin-right:0.1rem;
    height:0.2rem;
    width:0.2rem;
    border-radius: 50%;
    background:#aaa;
    animation: myfirst 1.5s;
    -moz-animation: myfirst 1.5s;	/* Firefox */
    -webkit-animation: myfirst 1.5s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1.5s;	/* Opera */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
.loading_list:nth-child(2) .loading_div{
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
    -o-animation-delay:0.3s;
}
.loading_list:nth-child(3) .loading_div{
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
}
@keyframes myfirst
{
    50%  {width:0.4rem;height:0.4rem}
    100% {width:0.2rem;height:0.2rem}
}
@-moz-keyframes myfirst{
    50%  {width:0.4rem;height:0.4rem}
    100% {width:0.2rem;height:0.2rem}
}
@-webkit-keyframes myfirst{
    50%  {width:0.4rem;height:0.4rem}
    100% {width:0.2rem;height:0.2rem}
}
@-o-keyframes myfirst{
    50%  {width:0.4rem;height:0.4rem}
    100% {width:0.2rem;height:0.2rem}
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值