loading

Posted 2021-01-02 cloudloong

html部分：

<div id="loading" class="loading position">
　　<div class="spinner">
　　　　<div class="bounce1"></div>
　　　　<div class="bounce2"></div>
　　　　<div class="bounce3"></div>
　　</div>
　　<p>loading...</p>
</div>

css部分：

.loading{text-align: center; left:50%; font-size: 30px; z-index: 1;}
#loading{width: 100%; top:45%; margin-left: -50%;}
.loading p{color: #ff9244; font-weight: bold; font-family: Arial; font-size: 24px; }
.spinner { margin: 0 auto; width: 150px; text-align: center; }
.spinner > div { width: 30px; height: 30px; background-color:#ff9244; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes bouncedelay {
　　0%, 80%, 100% { -webkit-transform: scale(0.0) }
　　40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
　　0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0);}
　　40% { transform: scale(1.0); -webkit-transform: scale(1.0);}
}