CSS3实现18种Loading效果
2024-04-11 20:44:22
在网上看到一篇文章，css实现loading的效果，特此整理代码方便以后使用。
第1种效果：
<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ease infinite;}@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 70px;margin: -15px 0;background: lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.2s;}.loading span:nth-child(3){-webkit-animation-delay:0.4s;}.loading span:nth-child(4){-webkit-animation-delay:0.6s;}.loading span:nth-child(5){-webkit-animation-delay:0.8s;}第2种效果：
<div class="loading"><span></span>
</div>.loading{width: 150px;height: 4px;border-radius: 2px;margin: 0 auto;margin-top:100px;position: relative;background: lightgreen;-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;}.loading span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;margin-top: -7px;margin-left:-8px;-webkit-animation: changePosition 1.04s ease-in infinite alternate;}@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}}@-webkit-keyframes changePosition{0%{background: lightgreen;}100%{margin-left: 142px;background: lightblue;}}第3-5种效果：
<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>第3种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第4种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1.3);}100%{opacity: 0.2;-webkit-transform: scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第5种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;position: relative;margin-top:100px;}.loading span{position: absolute;width: 15px;height: 100%;border-radius: 50%;background: lightgreen;-webkit-animation: load 1.04s ease-in infinite alternate;}@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: translate(0px);}100%{opacity: 0.2;-webkit-transform: translate(150px);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第6-8种效果：
<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>第6种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第7种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0;-webkit-transform: rotate(90deg);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第8种效果的css样式：
.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-transform-origin: right bottom;-webkit-animation: load 1s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1);}100%{opacity: 0;-webkit-transform: rotate(90deg) scale(.3);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第9-10种效果：
<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>第9种效果的css样式：
.loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 16px;height: 16px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0.2;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 0;margin-left: -8px;-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-8px;-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 0;left: 50%;margin-left: -8px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;}第10种效果的css样式：
.loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform: scale(1.2);opacity: 1;}100%{-webkit-transform: scale(.3);opacity: 0.5;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 0;margin-left: -10px;-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 0;left: 50%;margin-left: -10px;-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;}第11种效果：
<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div> .loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 60px;margin-top: -20px;background: lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.13s;}.loading span:nth-child(3){-webkit-animation-delay:0.26s;}.loading span:nth-child(4){-webkit-animation-delay:0.39s;}.loading span:nth-child(5){-webkit-animation-delay:0.52s;}第12种效果：
<div class="loading"><span></span>
</div>.loading{width: 80px;height: 80px;border-radius: 50%;margin: 0 auto;margin-top:100px;position: relative;border:5px solid lightgreen;-webkit-animation: turn 2s linear infinite;}.loading span{display: inline-block;width: 30px;height: 30px;border-radius: 50%;background: lightgreen;position: absolute;left: 50%;margin-top: -15px;margin-left: -15px;-webkit-animation: changeBgColor 2s linear infinite;}@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}}@-webkit-keyframes turn{0%{-webkit-transform: rotate(0deg);border-color: lightgreen;}100%{-webkit-transform: rotate(360deg);border-color: lightblue;}}第13种效果：
<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1.2);}100%{opacity: .2;-webkit-transform: scale(.2);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}第14种效果：
<div class="loading"><span></span>
</div>.loading{width: 150px;height: 8px;border-radius: 4px;margin: 0 auto;margin-top:100px;position: relative;background: lightblue;overflow: hidden;}.loading span{display:block;width: 100%;height: 100%;border-radius: 3px;background: lightgreen;-webkit-animation: changePosition 4s linear infinite;}@-webkit-keyframes changePosition{0%{-webkit-transform: translate(-150px);}50%{-webkit-transform: translate(0);}100%{-webkit-transform: translate(150px);}}第15种效果：
<div class="loading"><span></span>
</div>.loading{width: 200px;height: 60px;margin: 0 auto;margin-top: 100px;position: relative;}.loading span{width: 50px;height: 30px;border-radius: 50%;background: lightgreen;position: absolute;top: 50%;margin-top: -15px;overflow: hidden;-webkit-animation: changePosition 2.08s linear infinite;}@-webkit-keyframes changePosition{0%,100%{-webkit-transform: translate(70px);}20%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(0px);}30%{width: 20px;height: 60px;margin-top:-30px;-webkit-transform: translate(0px);}35%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(5px);background: lightblue;}70%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(160px);}80%{width: 20px;height: 60px;margin-top:-30px;-webkit-transform: translate(160px);}85%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(155px);background: lightgreen;}}第16种效果：
<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>.loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 30px;height: 10px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0.2;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-5px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 10px;top: 20px;-webkit-transform: rotate(45deg);-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 10px;margin-left: -15px;-webkit-transform: rotate(90deg);-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 20px;right:10px;-webkit-transform: rotate(135deg);-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-5px;-webkit-transform: rotate(180deg);-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 10px;bottom:20px;-webkit-transform: rotate(225deg);-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 10px;left: 50%;margin-left: -15px;-webkit-transform: rotate(270deg);-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 20px;left: 10px;-webkit-transform: rotate(315deg);-webkit-animation-delay:1.04s;}第17种效果：
<div class="loadEffect"><div><span></span></div><div><span></span></div><div><span></span></div><div><span></span></div>
</div>.loadEffect {width: 100px;height: 100px;margin: 0 auto;margin-top:100px;position: relative;}.loadEffect div{width: 100%;height: 100%;position: absolute;-webkit-animation: load 2.08s linear infinite;}.loadEffect div span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightgreen;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;}@-webkit-keyframes load{0%{-webkit-transform: rotate(0deg);}10%{-webkit-transform: rotate(45deg);}50%{opacity: 1;-webkit-transform: rotate(160deg);}62%{opacity: 0;}65%{opacity: 0;-webkit-transform: rotate(200deg);}90%{-webkit-transform: rotate(340deg);}100%{-webkit-transform: rotate(360deg);}}.loadEffect div:nth-child(1){-webkit-animation-delay:0.2s;}.loadEffect div:nth-child(2){-webkit-animation-delay:0.4s;}.loadEffect div:nth-child(3){-webkit-animation-delay:0.6s;}.loadEffect div:nth-child(4){-webkit-animation-delay:0.8s;}第18种效果：
<div class="loading"><div><span></span></div><div><span></span></div><div><span></span></div>
</div>.loading{width: 60px;height: 60px;margin: 0 auto;margin-top:100px;position: relative;-webkit-animation: load 3s linear infinite;}.loading div{width: 100%;height: 100%;position: absolute;}.loading span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #99CC66;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;-webkit-animation: changeBgColor 3s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform: rotate(0deg);}33.3%{-webkit-transform: rotate(120deg);}66.6%{-webkit-transform: rotate(240deg);}100%{-webkit-transform: rotate(360deg);}}@-webkit-keyframes changeBgColor{0%,100%{background: #99CC66;}33.3%{background: #FFFF66;}66.6%{background: #FF6666;}}.loading div:nth-child(2){-webkit-transform: rotate(120deg);}.loading div:nth-child(3){-webkit-transform: rotate(240deg);}.loading div:nth-child(2) span{-webkit-animation-delay: 1s;}.loading div:nth-child(3) span{-webkit-animation-delay: 2s;}原文地址：https://www.jianshu.com/p/6ac3e3e12d61
CSS3实现18种Loading效果相关推荐
- css实现loading,CSS3实现18种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- 第1种效果: 代码如下: .loading{ width: 80px; height: 40px; ...
- CSS3实现8种Loading效果【第二波】
CSS3实现8种Loading效果[第二波] 原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注: ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- css实现loading,CSS3实现10种Loading效果
很适合菜鸟,果断搬过来了. 第1种效果: 代码如下: html css .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top: ...
- HTML5+CSS3 最酷的 loading 效果汇总
用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...
- css实现loading,css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 .demo1{ width: 40px; height: 40px; margin: 0 auto; border-radius: 100px; ...
- html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接 代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
- 18种各式各样的loading，纯html5+css3无图片
网友总结的18种各式各样的loading,纯html5+css3无图片,我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head& ...
- 常见图像格式类型区别及使用说明绝对路径和相对路径的使用场景css3实现loading效果
经前两天晚上的提问,胡老师给我留下了两个问题: 1. JPEG PNG GIF等图像格式的区别和使用情况: 2. 绝对路径和相对路径的使用场景: 3. 如何用非GIF动画实现loading效果: 以下 ...
最新文章
- 三星专业级360度视频拍摄设备登场，能直接传输3D VR视频
- 微服务架构如何保障双11狂欢下的99.99%高可用？
- iOS真机调试 for Xcode 5
- hibernate自定义校验器使用（字段在in范围之内）
- 时间序列模式识别_空气质量传感器数据的时间序列模式识别
- 基因行业容器存储解决方案
- python文件是怎么打开_python file怎么打开
- php写语音朗读,详解在网页上通过JS实现文本的语音朗读
- 词嵌入和网络在NLP中贡献
- Win11右建没有刷新怎么办？Win11右建没有刷新的解决方法
- Python数据分析与机器学习项目实战
- 统计素数并求和python_Python练习题4.2统计素数并求和
- 微信公众号/订阅号怎么用互动伴侣小程序开通留言功能？
- 怎么去除脸上的黄褐斑
- Kettle【实践 04】Java环境实现KJB和KTR脚本文件执行v9版本9.0.0.0-423相关依赖说明（云资源分享:依赖包+kjb+ktr+测试源码）
- 10Wqps评论中台，如何架构？B站是这么做的！！！
- springboot发送QQ邮箱
- RK3588 烧写固件
- Puddings收获
- 解决网络丢包问题及故障判断方法