这次我们来说一下常见的几种loding效果实现，loding效果实现需要注意哪几点，下面就是实战案例，一起来看一下。
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
<style>
.loader {
float: left;
}
.loader {
position: relative;
width: 5rem;
height: 5rem;
}
.loader.small {
-webkit-transform: scale(.5);
transform: scale(.5);
}
.loader.circle-line,
.loader.circle-round {
height: 5rem;
}
/*circle-line*/
.loader.circle-line span {
position: absolute;
display: inline-block;
width: 1.5rem;
height: .5rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
background: #1ABC9C;
opacity: .05;
-webkit-animation: circle-line 1s ease infinite;
animation: circle-line 1s ease infinite;
}
.loader.circle-line span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.25rem;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.circle-line span:nth-child(2) {
top: 1rem;
left: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.circle-line span:nth-child(3) {
left: 50%;
top: .5rem;
margin-left: -.75rem;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.circle-line span:nth-child(4) {
right: .5rem;
top: 1rem;
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.circle-line span:nth-child(5) {
left: 3.5rem;
top: 50%;
margin-top: -.25rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
.loader.circle-line span:nth-child(6) {
bottom: 1rem;
right: .5rem;
-webkit-transform: rotate(-145deg);
transform: rotate(-145deg);
-webkit-animation-delay: .78s;
animation-delay: .78s;
}
.loader.circle-line span:nth-child(7) {
left: 50%;
bottom: .5rem;
margin-left: -15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .91s;
animation-delay: .91s;
}
.loader.circle-line span:nth-child(8) {
bottom: 1rem;
left: .5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
@keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@-webkit-keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
/*circle-line-spin*/
.loader.circle-line-spin .circle-line-inner {
width: 100%;
height: 100%;
-webkit-animation: circle-line-spin 1.5s linear infinite;
animation: circle-line-spin 1.5s linear infinite;
}
.loader.circle-line-spin span {
position: absolute;
display: inline-block;
width: 1.5rem;
height: .5rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
background: #1ABC9C;
opacity: .7;
}
.loader.circle-line-spin span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.25rem;
}
.loader.circle-line-spin span:nth-child(2) {
top: 1rem;
left: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.loader.circle-line-spin span:nth-child(3) {
left: 50%;
top: .5rem;
margin-left: -.75rem;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loader.circle-line-spin span:nth-child(4) {
right: .5rem;
top: 1rem;
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
.loader.circle-line-spin span:nth-child(5) {
left: 3.5rem;
top: 50%;
margin-top: -.25rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.loader.circle-line-spin span:nth-child(6) {
bottom: 1rem;
right: .5rem;
-webkit-transform: rotate(-145deg);
transform: rotate(-145deg);
}
.loader.circle-line-spin span:nth-child(7) {
left: 50%;
bottom: .5rem;
margin-left: -15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.loader.circle-line-spin span:nth-child(8) {
bottom: 1rem;
left: .5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@keyframes circle-line-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes circle-line-spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
/*circle-round*/
.loader.circle-round span {
opacity: .05;
-webkit-animation: circle-round 1s ease infinite;
animation: circle-round 1s ease infinite;
}
.loader.circle-round-fade span {
-webkit-animation: circle-round-fade 1s ease infinite;
animation: circle-round-fade 1s ease infinite;
}
.loader.circle-round span,
.loader.circle-round-fade span {
position: absolute;
width: .8rem;
height: .8rem;
display: inline-block;
border-radius: 50%;
background: #1ABC9C;
}
.loader.circle-round span:nth-child(1),
.loader.circle-round-fade span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.4rem;
-webkit-animation-delay: -1.04s;
animation-delay: -1.04s;
}
.loader.circle-round span:nth-child(2),
.loader.circle-round-fade span:nth-child(2) {
top: .7rem;
left: .7rem;
-webkit-animation-delay: -.91s;
animation-delay: -.91s;
}
.loader.circle-round span:nth-child(3),
.loader.circle-round-fade span:nth-child(3) {
top: 0;
left: 50%;
margin-left: -.4rem;
-webkit-animation-delay: -.78s;
animation-delay: -.78s;
}
.loader.circle-round span:nth-child(4),
.loader.circle-round-fade span:nth-child(4) {
right: .7rem;
top: .7rem;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
.loader.circle-round span:nth-child(5),
.loader.circle-round-fade span:nth-child(5) {
right: 0;
top: 50%;
margin-top: -.4rem;
-webkit-animation-delay: -.52s;
animation-delay: -.52s;
}
.loader.circle-round span:nth-child(6),
.loader.circle-round-fade span:nth-child(6) {
bottom: .7rem;
right: .7rem;
-webkit-animation-delay: -.39s;
animation-delay: -.39s;
}
.loader.circle-round span:nth-child(7),
.loader.circle-round-fade span:nth-child(7) {
bottom: 0;
left: 50%;
margin-left: -.4rem;
-webkit-animation-delay: -.26s;
animation-delay: -.26s;
}
.loader.circle-round span:nth-child(8),
.loader.circle-round-fade span:nth-child(8) {
left: .7rem;
bottom: .7rem;
-webkit-animation-delay: -.13s;
animation-delay: -.13s;
}
@keyframes circle-round {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@-webkit-keyframes circle-round {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@keyframes circle-round-fade {
0% {
opacity: .25;
transform: scale(.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes circle-round-fade {
0% {
opacity: .25;
transform: scale(.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*line-square*/
.loader.line-square {
width: 6rem;
height: .8rem;
}
.loader.line-square span {
position: absolute;
top: 0;
width: .8rem;
height: .8rem;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-square 1s ease infinite;
animation: line-square 1s ease infinite;
}
.loader.line-square span:nth-child(1) {
left: 0;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.line-square span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.line-square span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.line-square span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.line-square span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
@keyframes line-square {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
@-webkit-keyframes line-square {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
/*line-round*/
.loader.line-round {
width: 6rem;
height: .8rem;
}
.loader.line-round span {
position: absolute;
top: 0;
width: .8rem;
height: .8rem;
border-radius: 50%;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-round 1s ease infinite;
animation: line-round 1s ease infinite;
}
.loader.line-round span:nth-child(1) {
left: 0;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.line-round span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.line-round span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.line-round span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.line-round span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
@keyframes line-round {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
@-webkit-keyframes line-round {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
/*line-bounce*/
.loader.line-bounce {
width: 6rem;
height: 2.5rem;
}
.loader.line-bounce span {
position: absolute;
top: 0;
width: .5rem;
height: 2.5rem;
border-radius: 5px;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-bounce 1s ease infinite;
animation: line-bounce 1s ease infinite;
}
.loader.line-bounce span:nth-child(1) {
left: 0;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
.loader.line-bounce span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: -.78s;
animation-delay: -.78s;
}
.loader.line-bounce span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: -.91s;
animation-delay: -.91s;
}
.loader.line-bounce span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: -.78s;
animation-delay: -78s;
}
.loader.line-bounce span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
@keyframes line-bounce {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.3);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes line-bounce {
0% {
-webkit-transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(.3);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*circle-spin*/
.loader.circle-spin {
border-radius: 50%;
border: .2rem solid rgba(0, 0, 0, .05);
width: 4rem;
height: 4rem;
box-sizing: content-box;
}
.loader.circle-spin .loader-placeholder {
position: absolute;
top: -.2rem;
left: -.2rem;
border-radius: 50%;
border: .2rem solid transparent;
border-top: .2rem solid #1ABC9C;
width: 4rem;
height: 4rem;
box-sizing: content-box;
-webkit-animation: circle-spin 1s ease infinite;
animation: circle-spin 1s ease infinite;
}
@keyframes circle-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes circle-spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<div class="loader circle-line small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-line-spin small">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="loader circle-round small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-round-fade small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-square small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-round small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-bounce small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-spin small">
<div></div>
</div>
</div>
</body>
</html>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是常见的几种loding效果实现的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
@rules具有多少特异性，例如@keyframes和@media？Apr 18, 2025 am 11:34 AM前几天我得到了这个问题。我的第一个想法是：奇怪的问题！特异性是关于选择者的，而在符号不是选择器，那么...无关紧要？
在NUXT应用程序中创建动态路由Apr 18, 2025 am 10:53 AM在这篇文章中，我们将使用我构建和部署的电子商务商店演示来进行Netlify，以展示如何为传入数据制作动态路线。这是一个公平的
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
节省R.E.P.O.解释（并保存文件）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前ByDDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
Atom编辑器mac版下载
最流行的的开源编辑器
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
