css3 loading

css

/*loading start样式*/
.lds-css-loading-wrap { position: fixed; top: 0; left: 0; z-index: 10; display: none; }
.lds-css-loading-wrap .lds-css-loading-mask { position: fixed; width: 100vw; height: 100vh; z-index: 51; }
.lds-css-loading-wrap .lds-css-loading-content { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); padding: 0.3rem; color: #fff; width: 24vw; height: 24vw; color: #fff; text-align: center; }
.lds-css-loading-wrap .lds-css-loading-content .lds-css-loading-content-mask { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: #000; opacity: 0.6; z-index: -1; border-radius: 2vw; }
.lds-css-loading-wrap .lds-css-loading-content .lds-css-loading-conten-text { margin-top: 0.1rem; font-size: 12px; }
.lds-css-loading-wrap .lds-css-loading-content .lds-css { margin-top: 3.8vw; }
@@keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }
@@-webkit-keyframes lds-spinner { 0% { opacity: 1; }100% { opacity: 0; } }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner { position: relative; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div { left: 94px; top: 20px; position: absolute; -webkit-animation: lds-spinner linear 1s infinite; animation: lds-spinner linear 1s infinite; background: #ffffff; width: 12px; height: 40px; border-radius: 20%; -webkit-transform-origin: 6px 80px; transform-origin: 6px 80px; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-delay: -0.916666666666667s; animation-delay: -0.916666666666667s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(2) { -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: -0.833333333333333s; animation-delay: -0.833333333333333s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(3) { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: -0.75s; animation-delay: -0.75s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(4) { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.666666666666667s; animation-delay: -0.666666666666667s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(5) { -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: -0.583333333333333s; animation-delay: -0.583333333333333s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(6) { -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(7) { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.416666666666667s; animation-delay: -0.416666666666667s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(8) { -webkit-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: -0.333333333333333s; animation-delay: -0.333333333333333s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(9) { -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: -0.25s; animation-delay: -0.25s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(10) { -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.166666666666667s; animation-delay: -0.166666666666667s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(11) { -webkit-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: -0.083333333333333s; animation-delay: -0.083333333333333s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner div:nth-child(12) { -webkit-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: 0s; animation-delay: 0s; }
.lds-css-loading-wrap .lds-css-loading-content .lds-spinner { width: 110% !important; height: 46px !important; -webkit-transform: translate(-23px, -23px) scale(0.23) translate(23px, 23px); transform: translate(-23px, -23px) scale(0.23) translate(23px, 23px); }
/*loading end*/

html

<div class="lds-css-loading-wrap">
    <div class="lds-css-loading-mask"></div>
    <div class="lds-css-loading-content">
        <div class="lds-css-loading-content-mask"></div>
        <div class="lds-css ng-scope">
            <div class="lds-spinner" style="width:100%;height:100%">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="lds-css-loading-conten-text">加载中...</div>
    </div>
</div>

image.png