3．小圆型Loading
这类Loading动画的基本思想是：在呈现容器中定义1个或多个子层，再对每个子层进行样式定义，使得其均显示为一个实心圆形，最后编写关键帧动画控制，使得各个实心圆或者大小发生改变、或者平移、或者旋转。
（1）小圆大小或透明度进行变化。
例如，在container层中定义两个名为shape的子层，通过对.shape的样式定义使得两个子层均显示一个实心圆，定义关键帧控制两个圆的大小进行交替缩放，形成两个圆的切换效果。编写HTML文件如下。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { width: 80px; height: 80px; border-radius: 50%; background-color: #0000ff; opacity: 0.6; position: absolute; animation: anim 2.0s infinite ease-in-out; } .shape:nth-child(2) { animation-delay: -1.0s; } @keyframes anim { 0%,100% { transform: scale(0.0);} 50% { transform: scale(1.0); } } </style> </head> <body> <div class="container"> <div class="shape"></div> <div class="shape"></div> </div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图27所示的Loading动画效果。
图27 Loading动画效果（21）
若改写.shape:nth-child(2)的定义如下，使得两个圆的初始位置不同，其他部分保持不变
.shape:nth-child(2)
{
top: auto;
bottom: 10px;
animation-delay: -1.0s;
}
则呈现程序如图28所示的动画效果。
图28 Loading动画效果（22）
又例如，在container层中定义三个名为shape的子层，通过对.shape的样式定义使得三个子层显示为3个同行并排放置的实心小圆，定义关键帧控制三个圆的大小进行交替缩放。编写HTML文件如下。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { width: 30px; height: 30px; background-color: #228b22; border-radius: 100%; display: inline-block; margin-left: 10px; animation: anim 1.4s infinite ease-in-out; animation-fill-mode: both; } .shape:nth-child(1) { animation-delay: -0.32s; } .shape:nth-child(2) { animation-delay: -0.16s; } @keyframes anim { 0%, 80%, 100% { transform: scale(0.0); } 40% { transform: scale(1.0); } } </style> </head> <body> <div class="container"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图29所示的Loading动画效果。
图29 Loading动画效果（23）
如将上面代码中的关键帧定义改写如下：
@keyframes anim
{
0%, 80%, 100% { transform: scale(0.2); opacity: 0.2;}
40% { transform: scale(1.0); opacity: 1; }
}
则呈现出如图30所示的Loading动画效果。
图30 Loading动画效果（24）
（2）小圆的位置发生变化。
例如，让一个小圆在一条水平窄木条上进行移动，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { width: 200px; height: 8px; border-radius: 2px; position: relative; background: red; animation: changeBgColor 1s ease-in infinite alternate; } .loader>span { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: red; position: absolute; margin-top: -8px; margin-left:-12px; animation: changePosition 1s ease-in infinite alternate; } @keyframes changeBgColor { 0% { background: red; } 100% { background: lightblue; } } @keyframes changePosition { 0% { background: red; } 100% { margin-left: 188px; background: lightblue; } } </style> </head> <body> <div class="container"> <div class="loader"> <span></span> </div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图31所示的Loading动画效果。
图31 Loading动画效果（25）
又例如，有蓝、黄、绿三个实心圆，让居中的黄圆不动，蓝圆和绿圆进行平移变换。编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .ball { position: absolute; width: 30px; height: 30px; border-radius: 50%; } .container .yellow { background-color: #f5e82f; } .container .blue { background-color: #4cb8f5; animation: animateBlue 1.8s infinite; } .container .green { background-color: #a6e630; animation: animateGreen 1.8s infinite; } @keyframes animateGreen { 0%,100% { transform: translate(-40px, 0px); } 50% { transform: translate(40px, 0px); } } @keyframes animateBlue { 0%,100% { transform: translate(40px, 0); } 50% { transform: translate(-40px, 0px); } } } </style> </head> <body> <div class="container"> <div class="ball blue"></div> <div class="ball yellow"></div> <div class="ball green"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图32所示的Loading动画效果。
图32 Loading动画效果（26）
再例如，让5个小圆在同一行上进行位置变化，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loading { width: 200px; height: 15px; position: relative; } .loading span { position: absolute; width: 15px; height: 100%; border-radius: 50%; background: #ff8c00; animation: load 1.04s ease-in infinite alternate; } @keyframes load { 0% { opacity: 1; transform: translate(0px); } 100% { opacity: 0.2; transform: translate(200px); } } .loading span:nth-child(1) { animation-delay:0.13s; } .loading span:nth-child(2) { animation-delay:0.26s; } .loading span:nth-child(3) { animation-delay:0.39s; } .loading span:nth-child(4) { animation-delay:0.52s; } .loading span:nth-child(5) { animation-delay:0.65s; } </style> </head> <body> <div class="container"> <div class="loading"> <span></span><span></span><span></span> <span></span><span></span> </div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图33所示的Loading动画效果。
图33 Loading动画效果（27）
若改写上面文件中.loading span和关键帧的定义如下，其余部分保持不变
.loading span
{
15px;
height: 100%;
display: inline-block;
margin-right: 15px;
background: #ff8c00;
animation: load 1.04s ease infinite;
}
@keyframes load
{
0% { opacity: 1; transform: rotate(0deg); }
100% { opacity: 0; transform: rotate(90deg); }
}
则呈现出如图34所示的动画效果。
图34 Loading动画效果（28）
还例如，让4个小圆在指定的四个位置进行切换变化，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { width: 40px; height: 40px; border-radius:50%; border:0; position:absolute; background-color: #00ff00; animation: spin 2s infinite ease; } .shape:first-child { background:#ff8c00; animation-delay:-1.5s; } .shape:nth-child(2) { background:#20b2aa; animation-delay:-1s; } .shape:nth-child(3) { background:#32cd32; animation-delay:-0.5s; } .shape:last-child { background:#da70d6; } @keyframes spin { 0%,100% { transform:translate(-60px,0);} 25% { transform:translate(0,-60px);} 50% { transform:translate(60px,0); } 75% { transform:translate(0,60px); } } </style> </head> <body> <div class="container"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图35所示的Loading动画效果。
图35 Loading动画效果（29）
在这个例子的基础上，我们再复杂一点点，搞大中小三种类型各4种颜色的12个圆进行位置变换。编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .group { width: 64px; height: 24px; position: absolute; } .group:nth-child(2) { transform: rotate(90deg); } .group:nth-child(3) { transform: rotate(180deg); } .group:nth-child(4) { transform: rotate(270deg); } .shape { top: 50%; left: 50%; border-radius:50%; animation: move 2.5s infinite; position: absolute; } .shape:nth-child(1) { width: 8px; height: 8px; margin-top:-4px; margin-left:-4px; animation-delay: -0.3s; } .shape:nth-child(2) { width: 16px; height: 16px; margin-top:-8px; margin-left:--8px; animation-delay: -0.6s; } .shape:nth-child(3) { width: 24px; height: 24px; margin-top:-12px; margin-left:-12px; animation-delay: -0.9s; } .blue { background-color: #00f; } .red { background-color: #f00; } .yellow { background-color: #ff0; } .green { background-color: #0f0; } @keyframes move { 0% { transform: translateX(0); } 25% { transform: translateX(-64px); } 75% { transform: translateX(32px); } 100% {transform: translateX(0); } } </style> </head> <body> <div class="container"> <div class="group"> <div class="shape blue"></div> <div class="shape blue"></div> <div class="shape blue"></div> </div> <div class="group"> <div class="shape yellow"></div> <div class="shape yellow"></div> <div class="shape yellow"></div> </div> <div class="group"> <div class="shape red"></div> <div class="shape red"></div> <div class="shape red"></div> </div> <div class="group"> <div class="shape green"></div> <div class="shape green"></div> <div class="shape green"></div> </div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图36所示的Loading动画效果。
图36 Loading动画效果（30）
在调试时，删除.shape定义中的“top: 50%;”和“left: 50%;”两句设置，则呈现出如图37所示的动画效果，也挺有趣的。
图37 Loading动画效果（31）
若再继续删除.shape:nth-child(1)、.shape:nth-child(2)和.shape:nth-child(3)定义中有关margin-top和margin-left属性设置的相关6个语句，则则呈现出如图38所示的动画效果。
图38 Loading动画效果（32）
（3）小圆排列在圆周上形成旋转的效果。
我们先实现一个小圆在圆周轨道上运动的实例，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { width:100px; height:100px; border-radius:50%; border:2px solid #f3f3f3; animation:load 2s linear infinite; } .loader:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -8px; left: 50%; border: 8px solid #f3f3f3; border-radius: 50%; } @keyframes load { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class='loader'></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图39所示的Loading动画效果。
图39 Loading动画效果（33）
多个圆围成一个圆周进行旋转，怎么实现呢？
最简单地在圆周上分布多个小圆的实现方法是将border的border-style属性值设置为“dotted”点状边框，这样圆周边框上会分布一些小圆，让它们旋转起来。编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { width:100px; height:100px; border-radius:50%; border:16px dotted #f3f3f3; animation:load 2s linear infinite; } @keyframes load { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class='loader'></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图40所示的Loading动画效果。
图40 Loading动画效果（34）
但是这种方法得到的小圆是一个整体（因为只用一个div的边框得到），无法对其中某个小圆进行单独控制。为此，大多数情况下需要建立多个子层从而得到多个小圆。此时，需要合理地安排小圆的位置，使得它们看起来排列成圆周。
例如安排4个小圆在一个正方形A的四个顶点位置，另外安排4个小圆在正方形A绕中心旋转45°后的4个顶点位置，那么这8个小圆一定会排列成一个圆周。再对它们进行动画效果设置。编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loading { width: 100px; height: 100px; position: absolute; } .loading>span { width: 20px; height: 20px; border-radius: 50%; background: #ff8c00; position: absolute; animation: anim 1.5s linear infinite; } .loading>span:nth-child(1) { top: 0; left: 0; } .loading>span:nth-child(2) { top: 0; right: 0; } .loading>span:nth-child(3) { right: 0; bottom: 0; } .loading>span:nth-child(4) { bottom: 0; left: 0; } .loading:nth-of-type(2) { transform: rotate(45deg); } @keyframes anim { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } .loading:nth-of-type(1) span:nth-of-type(1) { animation-delay: -0.1s; } .loading:nth-of-type(2) span:nth-of-type(1) { animation-delay: -0.3s; } .loading:nth-of-type(1) span:nth-of-type(2) { animation-delay: -0.5s; } .loading:nth-of-type(2) span:nth-of-type(2) { animation-delay: -0.7s; } .loading:nth-of-type(1) span:nth-of-type(3) { animation-delay: -0.9s; } .loading:nth-of-type(2) span:nth-of-type(3) { animation-delay: -1.1s; } .loading:nth-of-type(1) span:nth-of-type(4) { animation-delay: -1.3s; } .loading:nth-of-type(2) span:nth-of-type(4) { animation-delay: -1.5s; } </style> </head> <body> <div class="container"> <div class="loading"> <span></span><span></span> <span></span><span></span> </div> <div class="loading"> <span></span><span></span> <span></span><span></span> </div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图41所示的Loading动画效果。
图41 Loading动画效果（35）
若将上面HTML代码中的关键帧定义改写为：
@keyframes anim
{
0%, 100% { opacity: 0.0;}
50% { opacity: 1; }
}
则呈现出如图42所示的动画效果。
图42 Loading动画效果（36）
若将上面HTML代码中的关键帧定义改写为：
@keyframes anim
{
0%, 80%,100% { opacity: 0.0;}
40% { opacity: 1; } }
则呈现出如图43所示的动画效果，此时圆周上好像只有6个小圆在旋转。
图43 Loading动画效果（37）
（4）利用box-shadow属性设置阴影图形。
同样可以通过对box-shadow属性进行设置，使得设定的阴影图形显示成小圆，并且将多个小圆（阴影形成的）围成一个圆周。
例如，设页面中有<div class='loader'></div>，定义.loader的样式定义为：
.loader
{
160px;
height:160px;
border-radius: 50%;
box-shadow: inset 0 0 0 16px #fff,
-80px -80px 0 -64px #f00,
0 -112px 0 -64px #f0f,
80px -80px 0 -64px #ff0,
-80px 80px 0 -64px #0f0,
0 112px 0 -64px #0ff,
80px 80px 0 -64px #00f,
-112px 0 0 -64px #808,
112px 0 0 -64px #000;
}
可在页面中显示如图44的图案，这个图案中的9个圆对应box-shadow属性值设定的9个分项。
图44 box-shadow属性设置的9个圆
定义关键帧，让这9个圆旋转起来，编写如下的HTML文件。
<!DOCTYPE html> <html> <head> <title>Loading加载动画</title> <style> .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { width:160px; height:160px; border-radius: 50%; box-shadow: inset 0 0 0 16px #fff, -80px -80px 0 -64px #f00, 0 -112px 0 -64px #f0f, 80px -80px 0 -64px #ff0, -80px 80px 0 -64px #0f0, 0 112px 0 -64px #0ff, 80px 80px 0 -64px #00f, -112px 0 0 -64px #808, 112px 0 0 -64px #000; animation: load 3s linear infinite; } @keyframes load { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); } } </style> </head> <body> <div class="container"> <div class='loader'></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图45所示的Loading动画效果。
图45 Loading动画效果（38）
再利用box-shadow属性设置4个小圆和四个方块，实现方和圆的舞动Loading动画效果。编写的HTML文件内容如下。
<!DOCTYPE html> <html> <head> <title>Loading</title> <style> .container { margin: 0 auto; width: 300px; height:300px; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .loader { margin: 120px auto; width: 0; height: 0; box-shadow: -30px -30px 0 25px #60f, 30px -30px 0 25px #60f, -30px 30px 0 25px #60f, 30px 30px 0 25px #60f; animation: circSquare 2.5s ease-in-out infinite; } @keyframes circSquare { 50% { width: 60px; height: 60px; border-radius: 50%; transform: rotate(0.5turn); box-shadow: -100px 0 0 #c36, 100px 0 0 #c0f, -100px 0 0 #f00, 100px 0 0 #f0f; } 80%, 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="loader"></div> </div> </body> </html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图46所示的Loading动画效果。
图46 Loading动画效果（39）