前言
这是我这几十年间从世界各地寻觅到的 Loading特效,合计117个(本文贴出第1-39个),而且是 纯CSS 制作的。
因为特效数量太多,所以我分成上、中、下三篇(每篇39个特效)。
《纯css实现117个Loading效果(上)》
《纯css实现117个Loading效果(中)》
《纯css实现117个Loading效果(下)》
本文不讲解原理(以后可能会开新篇讲),只贴代码,大家来感受一下复制粘贴的快感吧。
❤️❤️喜欢的给本文点个赞呗~
🐱💻在线展示
🐱👓仓库代码 Star一下吧
![cover01.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20b565fea8304b91ac7b4c3325851bc3~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
1
![001.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/723d9a5b23d94f3a8e116c9fdb6cbe74~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
width: 30px;
height: 30px;
border: 2px solid #000;
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
// 转转转动画
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
2
![002.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5644a483764414992b4c52dd52b4fd9~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 30px;
height: 30px;
border: 2px solid #000;
border-top-color: rgba(0, 0, 0, 0.2);
border-right-color: rgba(0, 0, 0, 0.2);
border-bottom-color: rgba(0, 0, 0, 0.2);
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
3
![003.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4374f34386dc40aa83bb3d8b043cd306~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 30px;
height: 30px;
border: 2px solid #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 100%;
animation: arrow-circle infinite 0.75s linear;
}
.loading:before,
.loading:after {
position: absolute;
top: 24px;
left: -2px;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: "";
transform: rotate(-30deg);
}
.loading:after {
top: 0;
left: 20.5px;
transform: rotate(150deg);
}
@keyframes arrow-circle {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0);
}
}
4
![004.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/560569179e3545eb9c6bdd6e55497cde~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #000;
animation: ball-scale infinite linear 0.75s;
}
@keyframes ball-scale {
0% {
transform: scale(0.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
5
![005.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b805c7d8d8f41039ac602516a2d9b80~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 40px;
height: 40px;
}
.loading:before,
.loading:after {
position: absolute;
width: 10px;
height: 10px;
content: "";
border-radius: 100%;
background-color: #000;
}
.loading:before {
transform: translate(0, 0);
animation: ball-circle-before infinite 1.5s linear;
}
.loading:after {
transform: translate(30px, 30px);
animation: ball-circle-after infinite 1.5s linear;
}
@keyframes ball-circle-after {
0% {
transform: translate(30px, 30px);
}
25% {
transform: translate(0, 30px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(30px, 0);
}
100% {
transform: translate(30px, 30px);
}
}
@keyframes ball-circle-before {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(30px, 0);
}
50% {
transform: translate(30px, 30px);
}
75% {
transform: translate(0, 30px);
}
100% {
transform: translate(0, 0);
}
}
6
![006.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d7e4ef61ca24a97a4cf128e3c0b2a04~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
display: block;
position: relative;
width: 6px;
height: 10px;
animation: rectangle infinite 1s ease-in-out -0.2s;
background-color: #000;
}
.loading:before,
.loading:after {
position: absolute;
width: 6px;
height: 10px;
content: "";
background-color: #000;
}
.loading:before {
left: -14px;
animation: rectangle infinite 1s ease-in-out -0.4s;
}
.loading:after {
right: -14px;
animation: rectangle infinite 1s ease-in-out;
}
@keyframes rectangle {
0%,
80%,
100% {
height: 20px;
box-shadow: 0 0 #000;
}
40% {
height: 30px;
box-shadow: 0 -20px #000;
}
}
7
![007.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3b6ac4dd62e4fc99345422804290839~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 100px;
height: 90px;
left: 10px;
top: 10px;
animation: heart infinite 0.85s linear;
}
.loading:before,
.loading:after {
position: absolute;
top: 0;
left: 30px;
width: 30px;
height: 50px;
content: "";
transform: rotate(-45deg);
transform-origin: 0 100%;
border-radius: 30px 30px 0 0;
background: #000;
}
.loading:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes heart {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
8
![008.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35721dc68d914d329a7e40b3152ecc34~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
margin: 20px;
position: relative;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #000;
animation: ball-rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
animation-fill-mode: both;
}
.loading:before,
.loading:after {
position: absolute;
width: 15px;
height: 15px;
margin: 2px;
content: "";
opacity: 0.8;
border-radius: 100%;
background-color: #000;
}
.loading:before {
top: 0;
left: -28px;
}
.loading:after {
top: 0;
left: 25px;
}
@keyframes ball-rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}
9
![009.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/941d83ef28f743d2a38deebdbc174807~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
margin: 20px;
position: relative;
width: 1px;
height: 1px;
}
.loading:before,
.loading:after {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
content: "";
border-radius: 100%;
background-color: #000;
}
.loading:before {
left: -15px;
animation: ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.loading:after {
right: -15px;
animation: ball-pulse infinite 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
@keyframes ball-pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.1);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 1;
}
}
10
![010.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ea3d1041c2e43fea808624126546142~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 50px;
perspective: 200px;
}
.loading:before,
.loading:after {
position: absolute;
width: 20px;
height: 20px;
content: "";
animation: jumping 0.5s infinite alternate;
background: rgba(0, 0, 0, 0);
}
.loading:before {
left: 0;
}
.loading:after {
right: 0;
animation-delay: 0.15s;
}
@keyframes jumping {
0% {
transform: scale(1) translateY(0px) rotateX(0deg);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
100% {
transform: scale(1.2) translateY(-25px) rotateX(45deg);
background: #000;
box-shadow: 0 25px 40px #000;
}
}
11
![011.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b816c18435446178e854a6356b40ded~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading {
position: relative;
width: 48px;
height: 48px;
animation: satellite 3s infinite linear;
border: 1px solid #000;
border-radius: 100%;
}
.loading:before,
.loading:after {
position: absolute;
left: 1px;
top: 1px;
width: 12px;
height: 12px;
content: "";
border-radius: 100%;
background-color: #000;
box-shadow: 0 0 10px #000;
}
.loading:after {
right: 0;
width: 20px;
height: 20px;
margin: 13px;
}
@keyframes satellite {
from {
transform: rotate(0) translateZ(0);
}
to {
transform: rotate(360deg) translateZ(0);
}
}
12
![012.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f250c1d6ee548c789d27689cfba91d3~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
margin: 30px;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 18px;
height: 18px;
}
.loading > div {
position: absolute;
width: 6px;
height: 6px;
border-radius: 0;
opacity: 0;
transform: translate(100%, 100%);
animation: ball-8bits 1s 0s ease infinite;
}
.loading > div:nth-child(1) {
animation-delay: -0.9375s;
}
.loading > div:nth-child(2) {
animation-delay: -0.875s;
}
.loading > div:nth-child(3) {
animation-delay: -0.8125s;
}
.loading > div:nth-child(4) {
animation-delay: -0.75s;
}
.loading > div:nth-child(5) {
animation-delay: -0.6875s;
}
.loading > div:nth-child(6) {
animation-delay: -0.625s;
}
.loading > div:nth-child(7) {
animation-delay: -0.5625s;
}
.loading > div:nth-child(8) {
animation-delay: -0.5s;
}
.loading > div:nth-child(9) {
animation-delay: -0.4375s;
}
.loading > div:nth-child(10) {
animation-delay: -0.375s;
}
.loading > div:nth-child(11) {
animation-delay: -0.3125s;
}
.loading > div:nth-child(12) {
animation-delay: -0.25s;
}
.loading > div:nth-child(13) {
animation-delay: -0.1875s;
}
.loading > div:nth-child(14) {
animation-delay: -0.125s;
}
.loading > div:nth-child(15) {
animation-delay: -0.0625s;
}
.loading > div:nth-child(16) {
animation-delay: 0s;
}
.loading > div:nth-child(1) {
top: -100%;
left: 0;
}
.loading > div:nth-child(2) {
top: -100%;
left: 33.3333333333%;
}
.loading > div:nth-child(3) {
top: -66.6666666667%;
left: 66.6666666667%;
}
.loading > div:nth-child(4) {
top: -33.3333333333%;
left: 100%;
}
.loading > div:nth-child(5) {
top: 0;
left: 100%;
}
.loading > div:nth-child(6) {
top: 33.3333333333%;
left: 100%;
}
.loading > div:nth-child(7) {
top: 66.6666666667%;
left: 66.6666666667%;
}
.loading > div:nth-child(8) {
top: 100%;
left: 33.3333333333%;
}
.loading > div:nth-child(9) {
top: 100%;
left: 0;
}
.loading > div:nth-child(10) {
top: 100%;
left: -33.3333333333%;
}
.loading > div:nth-child(11) {
top: 66.6666666667%;
left: -66.6666666667%;
}
.loading > div:nth-child(12) {
top: 33.3333333333%;
left: -100%;
}
.loading > div:nth-child(13) {
top: 0;
left: -100%;
}
.loading > div:nth-child(14) {
top: -33.3333333333%;
left: -100%;
}
.loading > div:nth-child(15) {
top: -66.6666666667%;
left: -66.6666666667%;
}
.loading > div:nth-child(16) {
top: -100%;
left: -33.3333333333%;
}
@keyframes ball-8bits {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
}
13
![013.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7362a11fa884f798e78f16dfdd199ae~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div:nth-child(1) {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 60%;
height: 60%;
background: #aaa;
border-radius: 100%;
transform: translate(-50%, -50%);
animation: ball-atom-shrink 4.5s infinite linear;
}
.loading > div:not(:nth-child(1)) {
position: absolute;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: none;
animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
}
.loading > div:not(:nth-child(1)):before {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
content: "";
background: currentColor;
border-radius: 50%;
opacity: 0.75;
animation: ball-atom-position 1.5s 0s infinite ease,
ball-atom-size 1.5s 0s infinite ease;
}
.loading > div:nth-child(2) {
animation-delay: 0.75s;
}
.loading > div:nth-child(2):before {
animation-delay: 0s, -1.125s;
}
.loading > div:nth-child(3) {
transform: rotate(120deg);
animation-delay: -0.25s;
}
.loading > div:nth-child(3):before {
animation-delay: -1s, -0.75s;
}
.loading > div:nth-child(4) {
transform: rotate(240deg);
animation-delay: 0.25s;
}
.loading > div:nth-child(4):before {
animation-delay: -0.5s, -0.125s;
}
@keyframes ball-atom-position {
50% {
top: 100%;
left: 100%;
}
}
14
![014.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc83436385a14725898adecb49c9d0c7~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 54px;
height: 18px;
}
.loading > div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
animation: ball-beat 0.7s -0.15s infinite linear;
}
.loading > div:nth-child(2n-1) {
animation-delay: -0.5s;
}
@keyframes ball-beat {
50% {
opacity: 0.2;
transform: scale(0.75);
}
100% {
opacity: 1;
transform: scale(1);
}
}
15
![015.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80dcb18c563e489b81ce0b17b3044b1b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 16px;
height: 16px;
}
.loading > div {
position: absolute;
top: 0;
left: -100%;
display: block;
width: 16px;
width: 100%;
height: 16px;
height: 100%;
border-radius: 100%;
opacity: 0.5;
animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1),
ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
}
.loading > div:nth-child(1) {
animation-delay: 0s, -0.5s;
}
.loading > div:nth-child(2) {
animation-delay: -0.5s, -1s;
}
.loading > div:nth-child(3) {
animation-delay: -1s, -1.5s;
}
.loading > div:nth-child(4) {
animation-delay: -1.5s, -2s;
}
.loading > div:nth-child(5) {
animation-delay: -2s, -2.5s;
}
@keyframes ball-circus-position {
50% {
left: 100%;
}
}
@keyframes ball-circus-size {
50% {
transform: scale(0.3, 0.3);
}
}
16
![016.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82832138565d4b1398c62a408f2cf05e~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 42px;
height: 32px;
}
.loading > div:nth-child(1) {
position: absolute;
bottom: 32%;
left: 18%;
width: 14px;
height: 14px;
border-radius: 100%;
transform-origin: center bottom;
animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
}
.loading > div:not(:nth-child(1)) {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 2px;
border-radius: 0;
transform: translate(60%, 0);
animation: ball-climbing-dot-steps 1.8s linear infinite;
}
.loading > div:not(:nth-child(1)):nth-child(2) {
animation-delay: 0ms;
}
.loading > div:not(:nth-child(1)):nth-child(3) {
animation-delay: -600ms;
}
.loading > div:not(:nth-child(1)):nth-child(4) {
animation-delay: -1200ms;
}
@keyframes ball-climbing-dot-jump {
0% {
transform: scale(1, 0.7);
}
20% {
transform: scale(0.7, 1.2);
}
40% {
transform: scale(1, 1);
}
50% {
bottom: 125%;
}
46% {
transform: scale(1, 1);
}
80% {
transform: scale(0.7, 1.2);
}
90% {
transform: scale(0.7, 1.2);
}
100% {
transform: scale(1, 0.7);
}
}
@keyframes ball-climbing-dot-steps {
0% {
top: 0;
right: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
right: 100%;
opacity: 0;
}
}
17
![017.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6fad3b1f2c940e988bb326ce1ac4c46~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
background: transparent;
border-style: solid;
border-width: 2px;
border-radius: 100%;
animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
}
.loading > div:first-child {
position: absolute;
width: 32px;
height: 32px;
border-right-color: transparent;
border-left-color: transparent;
}
.loading > div:last-child {
width: 16px;
height: 16px;
border-top-color: transparent;
border-bottom-color: transparent;
animation-duration: 0.5s;
animation-direction: reverse;
}
@keyframes ball-clip-rotate-multiple-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
18
![018.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16efa3697d544820af0ae4bddadd3e29~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
}
.loading > div:first-child {
position: absolute;
width: 32px;
height: 32px;
background: transparent;
border-style: solid;
border-width: 2px;
border-right-color: transparent;
border-left-color: transparent;
animation: ball-clip-rotate-pulse-rotate 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.loading > div:last-child {
width: 16px;
height: 16px;
animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
@keyframes ball-clip-rotate-pulse-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ball-clip-rotate-pulse-scale {
0%,
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
30% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(0.15);
}
}
19
![019.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/528f606b3a284d4095d1cd5509f35e35~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 120px;
height: 10px;
font-size: 0;
text-align: center;
}
.loading > div {
display: inline-block;
width: 10px;
height: 10px;
white-space: nowrap;
border-radius: 100%;
animation: ball-elastic-dots-anim 1s infinite;
}
@keyframes ball-elastic-dots-anim {
0%,
100% {
margin: 0;
transform: scale(1);
}
50% {
margin: 0 5%;
transform: scale(0.65);
}
}
20
![020.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3923212801a401fabe11d6f04cd3e4a~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 54px;
height: 18px;
}
.loading > div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
opacity: 0;
animation: ball-fall 1s ease-in-out infinite;
}
.loading > div:nth-child(1) {
animation-delay: -200ms;
}
.loading > div:nth-child(2) {
animation-delay: -100ms;
}
.loading > div:nth-child(3) {
animation-delay: 0ms;
}
@keyframes ball-fall {
0% {
opacity: 0;
transform: translateY(-145%);
}
10% {
opacity: 0.5;
}
20% {
opacity: 1;
transform: translateY(0);
}
80% {
opacity: 1;
transform: translateY(0);
}
90% {
opacity: 0.5;
}
100% {
opacity: 0;
transform: translateY(145%);
}
}
21
![021.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bee5ff9a582e43c8ba0e7859184b3aa2~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 8px;
height: 8px;
}
.loading > div {
position: absolute;
width: 12px;
height: 12px;
border-radius: 100%;
transform: translate(-50%, -50%);
animation: ball-fussion-ball1 1s 0s ease infinite;
}
.loading > div:nth-child(1) {
top: 0;
left: 50%;
z-index: 1;
}
.loading > div:nth-child(2) {
top: 50%;
left: 100%;
z-index: 2;
animation-name: ball-fussion-ball2;
}
.loading > div:nth-child(3) {
top: 100%;
left: 50%;
z-index: 1;
animation-name: ball-fussion-ball3;
}
.loading > div:nth-child(4) {
top: 50%;
left: 0;
z-index: 2;
animation-name: ball-fussion-ball4;
}
.loading.la-sm {
width: 4px;
height: 4px;
}
.loading.la-sm > div {
width: 6px;
height: 6px;
}
.loading.la-2x {
width: 16px;
height: 16px;
}
.loading.la-2x > div {
width: 24px;
height: 24px;
}
.loading.la-3x {
width: 24px;
height: 24px;
}
.loading.la-3x > div {
width: 36px;
height: 36px;
}
@keyframes ball-fussion-ball2 {
0% {
opacity: 0.35;
}
50% {
top: 200%;
left: 200%;
opacity: 1;
}
100% {
top: 100%;
left: 50%;
z-index: 1;
opacity: 0.35;
}
}
@keyframes ball-fussion-ball1 {
0% {
opacity: 0.35;
}
50% {
top: -100%;
left: 200%;
opacity: 1;
}
100% {
top: 50%;
left: 100%;
z-index: 2;
opacity: 0.35;
}
}
@keyframes ball-fussion-ball3 {
0% {
opacity: 0.35;
}
50% {
top: 200%;
left: -100%;
opacity: 1;
}
100% {
top: 50%;
left: 0;
z-index: 2;
opacity: 0.35;
}
}
@keyframes ball-fussion-ball4 {
0% {
opacity: 0.35;
}
50% {
top: -100%;
left: -100%;
opacity: 1;
}
100% {
top: 0;
left: 50%;
z-index: 1;
opacity: 0.35;
}
}
22
![022.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5767538abca348518e4a51e2f8a7d919~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 36px;
height: 36px;
}
.loading > div {
width: 8px;
height: 8px;
margin: 2px;
border-radius: 100%;
animation-name: ball-grid-beat;
animation-iteration-count: infinite;
}
.loading > div:nth-child(1) {
animation-duration: 0.65s;
animation-delay: 0.03s;
}
.loading > div:nth-child(2) {
animation-duration: 1.02s;
animation-delay: 0.09s;
}
.loading > div:nth-child(3) {
animation-duration: 1.06s;
animation-delay: -0.69s;
}
.loading > div:nth-child(4) {
animation-duration: 1.5s;
animation-delay: -0.41s;
}
.loading > div:nth-child(5) {
animation-duration: 1.6s;
animation-delay: 0.04s;
}
.loading > div:nth-child(6) {
animation-duration: 0.84s;
animation-delay: 0.07s;
}
.loading > div:nth-child(7) {
animation-duration: 0.68s;
animation-delay: -0.66s;
}
.loading > div:nth-child(8) {
animation-duration: 0.93s;
animation-delay: -0.76s;
}
.loading > div:nth-child(9) {
animation-duration: 1.24s;
animation-delay: -0.76s;
}
@keyframes ball-grid-beat {
0% {
opacity: 1;
}
50% {
opacity: 0.35;
}
100% {
opacity: 1;
}
}
23
![023.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7aa295b574f54f09be554b3ab8eb48c2~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 36px;
height: 36px;
}
.loading > div {
width: 8px;
height: 8px;
margin: 2px;
border-radius: 100%;
animation-name: ball-grid-pulse;
animation-iteration-count: infinite;
}
.loading > div:nth-child(1) {
animation-duration: 0.65s;
animation-delay: 0.03s;
}
.loading > div:nth-child(2) {
animation-duration: 1.02s;
animation-delay: 0.09s;
}
.loading > div:nth-child(3) {
animation-duration: 1.06s;
animation-delay: -0.69s;
}
.loading > div:nth-child(4) {
animation-duration: 1.5s;
animation-delay: -0.41s;
}
.loading > div:nth-child(5) {
animation-duration: 1.6s;
animation-delay: 0.04s;
}
.loading > div:nth-child(6) {
animation-duration: 0.84s;
animation-delay: 0.07s;
}
.loading > div:nth-child(7) {
animation-duration: 0.68s;
animation-delay: -0.66s;
}
.loading > div:nth-child(8) {
animation-duration: 0.93s;
animation-delay: -0.76s;
}
.loading > div:nth-child(9) {
animation-duration: 1.24s;
animation-delay: -0.76s;
}
.loading.la-sm {
width: 18px;
height: 18px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin: 1px;
}
.loading.la-2x {
width: 72px;
height: 72px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin: 4px;
}
.loading.la-3x {
width: 108px;
height: 108px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin: 6px;
}
@keyframes ball-grid-pulse {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.35;
transform: scale(0.45);
}
100% {
opacity: 1;
transform: scale(1);
}
}
24
![024.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c91a079d8c64f5ca7f5bfa306390977~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 40px;
height: 10px;
}
.loading > div {
width: 10px;
height: 10px;
border-radius: 100%;
}
.loading > div:first-child {
transform: translateX(0%);
animation: ball-newton-cradle-left 1s 0s ease-out infinite;
}
.loading > div:last-child {
transform: translateX(0%);
animation: ball-newton-cradle-right 1s 0s ease-out infinite;
}
.loading.la-sm {
width: 20px;
height: 4px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
}
.loading.la-2x {
width: 80px;
height: 20px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
}
.loading.la-3x {
width: 120px;
height: 30px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
}
@keyframes ball-newton-cradle-left {
25% {
transform: translateX(-100%);
animation-timing-function: ease-in;
}
50% {
transform: translateX(0%);
}
}
@keyframes ball-newton-cradle-right {
50% {
transform: translateX(0%);
}
75% {
transform: translateX(100%);
animation-timing-function: ease-in;
}
100% {
transform: translateX(0%);
}
}
25
![025.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e793c1574404dc4bacd13553cc5c3bc~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 54px;
height: 18px;
}
.loading > div:nth-child(1) {
animation-delay: -200ms;
}
.loading > div:nth-child(2) {
animation-delay: -100ms;
}
.loading > div:nth-child(3) {
animation-delay: 0ms;
}
.loading > div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
animation: ball-pulse 1s ease infinite;
}
.loading.la-sm {
width: 26px;
height: 8px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin: 2px;
}
.loading.la-2x {
width: 108px;
height: 36px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
margin: 8px;
}
.loading.la-3x {
width: 162px;
height: 54px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
margin: 12px;
}
@keyframes ball-pulse {
0%,
60%,
100% {
opacity: 1;
transform: scale(1);
}
30% {
opacity: 0.1;
transform: scale(0.01);
}
}
26
![026.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4001f8abc6874a55aca35a6d0df7c832~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 70px;
height: 14px;
}
.loading > div {
width: 10px;
height: 10px;
margin: 2px;
border-radius: 100%;
animation: ball-pulse-rise-even 1s cubic-bezier(0.15, 0.36, 0.9, 0.6) 0s
infinite;
}
.loading > div:nth-child(2n-1) {
animation-name: ball-pulse-rise-odd;
}
.loading.la-sm {
width: 34px;
height: 6px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin: 1px;
}
.loading.la-2x {
width: 140px;
height: 28px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
margin: 4px;
}
.loading.la-3x {
width: 210px;
height: 42px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
margin: 6px;
}
@keyframes ball-pulse-rise-even {
0% {
opacity: 1;
transform: scale(1.1);
}
25% {
transform: translateY(-200%);
}
50% {
opacity: 0.35;
transform: scale(0.3);
}
75% {
transform: translateY(200%);
}
100% {
opacity: 1;
transform: translateY(0);
transform: scale(1);
}
}
@keyframes ball-pulse-rise-odd {
0% {
opacity: 0.35;
transform: scale(0.4);
}
25% {
transform: translateY(200%);
}
50% {
opacity: 1;
transform: scale(1.1);
}
75% {
transform: translateY(-200%);
}
100% {
opacity: 0.35;
transform: translateY(0);
transform: scale(0.75);
}
}
27
![027.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bfb418b908e4ec9b8926eb4aa6fda6e~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 54px;
height: 18px;
}
.loading > div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
animation: ball-pulse-sync 0.6s infinite ease-in-out;
}
.loading > div:nth-child(1) {
animation-delay: -0.14s;
}
.loading > div:nth-child(2) {
animation-delay: -0.07s;
}
.loading > div:nth-child(3) {
animation-delay: 0s;
}
.loading.la-sm {
width: 26px;
height: 8px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin: 2px;
}
.loading.la-2x {
width: 108px;
height: 36px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
margin: 8px;
}
.loading.la-3x {
width: 162px;
height: 54px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
margin: 12px;
}
@keyframes ball-pulse-sync {
33% {
transform: translateY(100%);
}
66% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
28
![028.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db8dc80f85f14702ae5688e4cc044cb5~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 10px;
height: 10px;
}
.loading > div {
position: absolute;
width: 10px;
height: 10px;
margin-left: -25px;
border-radius: 100%;
animation: ball-running-dots-animate 2s linear infinite;
}
.loading > div:nth-child(1) {
animation-delay: 0s;
}
.loading > div:nth-child(2) {
animation-delay: -0.4s;
}
.loading > div:nth-child(3) {
animation-delay: -0.8s;
}
.loading > div:nth-child(4) {
animation-delay: -1.2s;
}
.loading > div:nth-child(5) {
animation-delay: -1.6s;
}
.loading > div:nth-child(6) {
animation-delay: -2s;
}
.loading > div:nth-child(7) {
animation-delay: -2.4s;
}
.loading > div:nth-child(8) {
animation-delay: -2.8s;
}
.loading > div:nth-child(9) {
animation-delay: -3.2s;
}
.loading > div:nth-child(10) {
animation-delay: -3.6s;
}
.loading.la-sm {
width: 4px;
height: 4px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-left: -12px;
}
.loading.la-2x {
width: 20px;
height: 20px;
}
.loading.la-2x > div {
width: 20px;
height: 20px;
margin-left: -50px;
}
.loading.la-3x {
width: 30px;
height: 30px;
}
.loading.la-3x > div {
width: 30px;
height: 30px;
margin-left: -75px;
}
@keyframes ball-running-dots-animate {
0%,
100% {
width: 100%;
height: 100%;
transform: translateY(0) translateX(500%);
}
80% {
transform: translateY(0) translateX(0);
}
85% {
width: 100%;
height: 100%;
transform: translateY(-125%) translateX(0);
}
90% {
width: 200%;
height: 75%;
}
95% {
width: 100%;
height: 100%;
transform: translateY(-100%) translateX(500%);
}
}
29
![029.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3f19ddb96f74ad295a709e79c4f4c7a~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
border-radius: 100%;
opacity: 0;
animation: ball-scale-multiple 1s 0s linear infinite;
}
.loading > div:nth-child(2) {
animation-delay: 0.2s;
}
.loading > div:nth-child(3) {
animation-delay: 0.4s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 16px;
height: 16px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 64px;
height: 64px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 96px;
height: 96px;
}
@keyframes ball-scale-multiple {
0% {
opacity: 0;
transform: scale(0);
}
5% {
opacity: 0.75;
}
100% {
opacity: 0;
transform: scale(1);
}
}
30
![030.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc01e9b49dc044339fb5ad709bdfd4ac~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
border-radius: 100%;
opacity: 0.5;
animation: ball-scale-pulse 2s infinite ease-in-out;
}
.loading > div:last-child {
animation-delay: -1s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 16px;
height: 16px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 64px;
height: 64px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 96px;
height: 96px;
}
@keyframes ball-scale-pulse {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
31
![031.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/240bcd61d6b64632af81be788d24f2e4~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
width: 32px;
height: 32px;
background: transparent;
border-width: 2px;
border-radius: 100%;
opacity: 0;
animation: ball-scale-ripple 1s 0s infinite
cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 16px;
height: 16px;
border-width: 1px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 64px;
height: 64px;
border-width: 4px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 96px;
height: 96px;
border-width: 6px;
}
@keyframes ball-scale-ripple {
0% {
opacity: 1;
transform: scale(0.1);
}
70% {
opacity: 0.65;
transform: scale(1);
}
100% {
opacity: 0;
}
}
32
![032.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cec90f613544226824f0cb0fc6acf39~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
background: transparent;
border-width: 2px;
border-radius: 100%;
opacity: 0;
animation: ball-scale-ripple-multiple 1.25s 0s infinite
cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
.loading > div:nth-child(1) {
animation-delay: 0s;
}
.loading > div:nth-child(2) {
animation-delay: 0.25s;
}
.loading > div:nth-child(3) {
animation-delay: 0.5s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 16px;
height: 16px;
border-width: 1px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 64px;
height: 64px;
border-width: 4px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 96px;
height: 96px;
border-width: 6px;
}
@keyframes ball-scale-ripple-multiple {
0% {
opacity: 1;
transform: scale(0.1);
}
70% {
opacity: 0.5;
transform: scale(1);
}
95% {
opacity: 0;
}
}
33
![033.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bef0212cf5d43bfb43832657c7d2f75~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin 1s infinite ease-in-out;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -1.125s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -1.25s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -1.375s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -1.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -1.625s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -1.75s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -1.875s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: -2s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin {
0%,
100% {
opacity: 1;
transform: scale(1);
}
20% {
opacity: 1;
}
80% {
opacity: 0;
transform: scale(0);
}
}
34
![034.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae75f71bd55b485ea0483b58e86e0575~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin-clockwise 1s infinite ease-in-out;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -0.875s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -0.75s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -0.625s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -0.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -0.375s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -0.25s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -0.125s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: 0s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin-clockwise {
0%,
100% {
opacity: 1;
transform: scale(1);
}
20% {
opacity: 1;
}
80% {
opacity: 0;
transform: scale(0);
}
}
35
![035.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3466590ee12d461f98b656952cc6fb7d~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin-clockwise-fade 1s infinite linear;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -0.875s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -0.75s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -0.625s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -0.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -0.375s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -0.25s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -0.125s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: 0s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin-clockwise-fade {
50% {
opacity: 0.25;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
36
![036.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f8dd8b8bbd240eba40a0c046efc0e18~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -0.875s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -0.75s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -0.625s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -0.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -0.375s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -0.25s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -0.125s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: 0s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin-clockwise-fade-rotating-rotate {
100% {
transform: rotate(-360deg);
}
}
@keyframes ball-spin-clockwise-fade-rotating {
50% {
opacity: 0.25;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
37
![037.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3d673bf30064df4b19fc627e57020df~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin-fade 1s infinite linear;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -1.125s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -1.25s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -1.375s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -1.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -1.625s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -1.75s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -1.875s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: -2s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin-fade {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.25;
transform: scale(0.5);
}
}
38
![038.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/427b41f24a554e34909ed125a2af1b78~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
animation: ball-spin-fade-rotate 6s infinite linear;
}
.loading > div {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
margin-left: -4px;
border-radius: 100%;
animation: ball-spin-fade 1s infinite linear;
}
.loading > div:nth-child(1) {
top: 5%;
left: 50%;
animation-delay: -1.125s;
}
.loading > div:nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
animation-delay: -1.25s;
}
.loading > div:nth-child(3) {
top: 50%;
left: 95%;
animation-delay: -1.375s;
}
.loading > div:nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
animation-delay: -1.5s;
}
.loading > div:nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
animation-delay: -1.625s;
}
.loading > div:nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
animation-delay: -1.75s;
}
.loading > div:nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
animation-delay: -1.875s;
}
.loading > div:nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
animation-delay: -2s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-sm > div {
width: 4px;
height: 4px;
margin-top: -2px;
margin-left: -2px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-2x > div {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
.loading.la-3x > div {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
@keyframes ball-spin-fade-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes ball-spin-fade {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.25;
transform: scale(0.5);
}
}
39
![039.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecb1c9cf428a4697b4211af4838a2950~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.image)
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 32px;
height: 32px;
animation: ball-spin-rotate 2s infinite linear;
}
.loading > div {
position: absolute;
top: 0;
width: 60%;
height: 60%;
border-radius: 100%;
animation: ball-spin-bounce 2s infinite ease-in-out;
}
.loading > div:last-child {
top: auto;
bottom: 0;
animation-delay: -1s;
}
.loading.la-sm {
width: 16px;
height: 16px;
}
.loading.la-2x {
width: 64px;
height: 64px;
}
.loading.la-3x {
width: 96px;
height: 96px;
}
@keyframes ball-spin-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes ball-spin-bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
更多推荐
《Fabric.js 从入门到精通》
《纯CSS实现『斑马纹理投影文字』》
《console.log也能插图!!!》
《给console来的样式》
|