移动端 loading图 css样式

最新推荐文章于 2024-07-08 03:03:19 发布

易大师33

最新推荐文章于 2024-07-08 03:03:19 发布

阅读量1k

点赞数

分类专栏：移动端常见问题文章标签：移动 css html

本文链接：https://blog.csdn.net/YiDaShi33/article/details/60871170

版权

移动端常见问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML：

<div class="section-loading-box">
   <div class="g-loading">
        <div class="g-loading-leaf g-loading-leaf-0"></div>
        <div class="g-loading-leaf g-loading-leaf-1"></div>
        <div class="g-loading-leaf g-loading-leaf-2"></div>
        <div class="g-loading-leaf g-loading-leaf-2"></div>
        <div class="g-loading-leaf g-loading-leaf-3"></div>
        <div class="g-loading-leaf g-loading-leaf-4"></div>
        <div class="g-loading-leaf g-loading-leaf-5"></div>
        <div class="g-loading-leaf g-loading-leaf-6"></div>
        <div class="g-loading-leaf g-loading-leaf-7"></div>
        <div class="g-loading-leaf g-loading-leaf-8"></div>
        <div class="g-loading-leaf g-loading-leaf-9"></div>
        <div class="g-loading-leaf g-loading-leaf-10"></div>
        <div class="g-loading-leaf g-loading-leaf-11"></div>
    </div>
</div>

CSS:

.g-loading {
    position: relative;
    width: 0;
    height: 16px;
    z-index: 2000000000;
    left: 50%;
    top: 50%;
}
.g-loading-leaf{
    position: absolute;
    top: 15px;
    opacity: 0.25;
    &:before{
        content:" ";
        position: absolute;
        width: 8.14px;
        height: 3.08px;
        background: rgb(209, 209, 213);
        box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px;
        border-radius: 1px;
        transform-origin: left 50% 0;
        -webkit-transform-origin: left 50% 0;
    }
    &-0{
        animation: opacity-60-25-0-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
        &:before{
            transform: rotate(0deg) translate(7.92px, 0px);
            -webkit-transform: rotate(0deg) translate(7.92px, 0px);
        }
    }
    &-1{
        animation: opacity-60-25-1-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
        &:before{
            transform: rotate(30deg) translate(7.92px, 0px);
            -webkit-transform: rotate(30deg) translate(7.92px, 0px);
        }
    }
    &-2{
        animation: opacity-60-25-2-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
        &:before{
            transform: rotate(60deg) translate(7.92px, 0px);
            -webkit-transform: rotate(60deg) translate(7.92px, 0px);
        }
    }
    &-3{
        animation: opacity-60-25-3-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
        &:before{
            transform: rotate(90deg) translate(7.92px, 0px);
            -webkit-transform: rotate(90deg) translate(7.92px, 0px);
        }
    }
    &-4{
        animation: opacity-60-25-4-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
        &:before{
            transform: rotate(120deg) translate(7.92px, 0px);
            -webkit-transform: rotate(120deg) translate(7.92px, 0px);
        }
    }
    &-5{
        animation: opacity-60-25-5-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
        &:before{
            transform: rotate(150deg) translate(7.92px, 0px);
            -webkit-transform: rotate(150deg) translate(7.92px, 0px);
        }
    }
    &-6{
        animation: opacity-60-25-6-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
        &:before{
            transform: rotate(180deg) translate(7.92px, 0px);
            -webkit-transform: rotate(180deg) translate(7.92px, 0px);
        }
    }
    &-7{
        animation: opacity-60-25-7-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
        &:before{
            transform: rotate(210deg) translate(7.92px, 0px);
            -webkit-transform: rotate(210deg) translate(7.92px, 0px);
        }
    }
    &-8{
        animation: opacity-60-25-8-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
        &:before{
            transform: rotate(240deg) translate(7.92px, 0px);
            -webkit-transform: rotate(240deg) translate(7.92px, 0px);
        }
    }
    &-9{
        animation: opacity-60-25-9-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
        &:before{
            transform: rotate(270deg) translate(7.92px, 0px);
            -webkit-transform: rotate(270deg) translate(7.92px, 0px);
        }
    }
    &-10{
        animation: opacity-60-25-10-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
        &:before{
            transform: rotate(300deg) translate(7.92px, 0px);
            -webkit-transform: rotate(300deg) translate(7.92px, 0px);
        }
    }
    &-11{
        animation: opacity-60-25-11-12 1.25s linear infinite;
        -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
        &:before{
            transform: rotate(330deg) translate(7.92px, 0px);
            -webkit-transform: rotate(330deg) translate(7.92px, 0px);
        }
    }
}

@-webkit-keyframes opacity-60-25-0-12 {
    0% { opacity: 0.25; }
    0.01% { opacity: 0.25; }
    0.02% { opacity: 1; }
    60.01% { opacity: 0.25; }
    100% { opacity: 0.25; }
}
@-webkit-keyframes opacity-60-25-1-12 {
    0% { opacity: 0.25; }
    8.34333% { opacity: 0.25; }
    8.35333% { opacity: 1; }
    68.3433% { opacity: 0.25; }
    100% { opacity: 0.25; }
}
@-webkit-keyframes opacity-60-25-2-12 {
    0% { opacity: 0.25; }
    16.6767% { opacity: 0.25; }
    16.6867% { opacity: 1; }
    76.6767% { opacity: 0.25; }
    100% { opacity: 0.25; }
}
@-webkit-keyframes opacity-60-25-3-12 {
    0% { opacity: 0.25; }
    25.01% { opacity: 0.25; }
    25.02% { opacity: 1; }
    85.01% { opacity: 0.25; }
    100% { opacity: 0.25; }
}
@-webkit-keyframes opacity-60-25-4-12 {
    0% { opacity: 0.25; }
    33.3433% { opacity: 0.25; }
    33.3533% { opacity: 1; }
    93.3433% { opacity: 0.25; }
    100% { opacity: 0.25; }
}
@-webkit-keyframes opacity-60-25-5-12 {
    0% { opacity: 0.270958333333333; }
    41.6767% { opacity: 0.25; }
    41.6867% { opacity: 1; }
    1.67667% { opacity: 0.25; }
    100% { opacity: 0.270958333333333; }
}
@-webkit-keyframes opacity-60-25-6-12 {
    0% { opacity: 0.375125; }
    50.01% { opacity: 0.25; }
    50.02% { opacity: 1; }
    10.01% { opacity: 0.25; }
    100% { opacity: 0.375125; }
}
@-webkit-keyframes opacity-60-25-7-12 {
    0% { opacity: 0.479291666666667; }
    58.3433% { opacity: 0.25; }
    58.3533% { opacity: 1; }
    18.3433% { opacity: 0.25; }
    100% { opacity: 0.479291666666667; }
}
@-webkit-keyframes opacity-60-25-8-12 {
    0% { opacity: 0.583458333333333; }
    66.6767% { opacity: 0.25; }
    66.6867% { opacity: 1; }
    26.6767% { opacity: 0.25; }
    100% { opacity: 0.583458333333333; }
}
@-webkit-keyframes opacity-60-25-9-12 {
     0% { opacity: 0.687625; }
     75.01% { opacity: 0.25; }
     75.02% { opacity: 1; }
     35.01% { opacity: 0.25; }
     100% { opacity: 0.687625; }
}
@-webkit-keyframes opacity-60-25-10-12 {
    0% { opacity: 0.791791666666667; }
    83.3433% { opacity: 0.25; }
    83.3533% { opacity: 1; }
    43.3433% { opacity: 0.25; }
    100% { opacity: 0.791791666666667; }
}
@-webkit-keyframes opacity-60-25-11-12 {
    0% { opacity: 0.895958333333333; }
    91.6767% { opacity: 0.25; }
    91.6867% { opacity: 1; }
    51.6767% { opacity: 0.25; }
    100% { opacity: 0.895958333333333; }
}