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>
相关推荐
开发者小天14 分钟前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄3 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1014 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19434 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧4 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台4 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1004 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc5 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃6 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
吃饺子不吃馅7 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学