h5 基于jq加载中动画

最新推荐文章于 2024-09-02 15:29:52 发布

Doooer

最新推荐文章于 2024-09-02 15:29:52 发布

阅读量1.2k

点赞数

分类专栏： html5 css loading 文章标签： html5 css 加载中

本文链接：https://blog.csdn.net/doooer/article/details/102856922

版权

css 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

html5

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}
}