移动端 loading图 css样式

来源：互联网发布：对比分歧算法编辑：程序博客网时间：2024/05/10 01:43

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

0 0