css加载中动画

html 复制代码
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<style>
#loader .square:nth-child(5n+1) {
    background: #0F9;
    animation-delay: 0s;
}
#loader .square:nth-child(5n+2) {
    background: #0CF;
    animation-delay: 0.1s;
}
#loader .square:nth-child(5n+3) {
    background: #93F;
    animation-delay: 0.2s;
}
#loader .square:nth-child(5n+4) {
    background: #F66;
    animation-delay: 0.3s;
}
#loader .square:nth-child(5n+5) {
    background: #FFF35C;
    animation-delay: 0.4s;
}

#loader {
    width: 500px;
    position: absolute;
    text-align: center;
    left: calc(50% - 250px);
    top: calc(50% - 10px);
}

#loader .square {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 10px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    animation: wave 1s cubic-bezier(.455,.03,.515,.955) infinite;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
</style>
 </head>
 <body>

  <div id="loader">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
		<div>加载中。。。</div>
    </div>
 </body>
</html>
相关推荐
懒羊羊大王&2 分钟前
5、qt系统相关
前端·qt
魔都吴所谓3 分钟前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
江城开朗的豌豆6 分钟前
Vue3 数据绑定的进化:为什么Proxy取代了defineProperty
前端·javascript·vue.js
DoraBigHead12 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我14 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马21 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆22 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder23 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder23 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆28 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js