写几个利用纯CSS实现loading加载效果的示例，代码非常的简单，有需要的可以参考一下。
CSS实现Loading加载的效果
例1：loading 直线加载
实例代码：
<style>
.load{
width:120px;
height:20px;
background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
animation:loading 2s infinite linear;
margin-bottom: 20px;
}
@keyframes loading {
100% {background-size:100%}
}
</style>
<div class="load"></div>
<span>飞鸟慕鱼博客</span>例2：loading 平滑加载
实例代码：
<style>
.load{
width:120px;
height:20px;
border-radius: 20px;
background:
linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
animation:load 2s infinite steps(10);
margin-bottom: 20px;
}
@keyframes load {100% {background-size:110%}}
</style>
<div class="load"></div>
<span>飞鸟慕鱼博客</span>例3：loading 方块加载
实例代码：
<style>
.load{
width:120px;
height:20px;
-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
animation:load 2s infinite steps(6);
margin-bottom: 20px;
}
@keyframes load {
100% {background-size:120%}
}
</style>
<div class="load"></div>
<span>飞鸟慕鱼博客</span>例4：loading 电池充电效果
实例代码：
<style>
.load {
width:80px;
height:40px;
border:2px solid #000;
padding:3px;
background: repeating-linear-gradient(90deg,#000 0 10px,#000 0 16px) 0/0% no-repeat content-box content-box;
position: relative;
animation:load 2s infinite steps(6);
margin-bottom: 20px;
}
.load::before {
content:"";
position: absolute;
top: 50%;
left:100%;
transform: translateY(-50%);
width:10px;
height: 10px;
border: 2px solid #000;
}
@keyframes load {
100% {background-size:120%}
}
</style>
<div class="load"></div>
<span>飞鸟慕鱼博客</span>