作者：zccst

以前loading都是一张图片，显示或隐藏。

现在如果考虑移动端弱网到连图片也载入不成功，此时css3的loading就非常有用了，而且模拟了图片效果，节省空间。

基本原理：

1，外部一个span，固定宽高（正方形），行内块元素，相对定位，垂直对齐。

2，内部12个span，相对宽高（相对外部），行内块元素，绝对定位(top,left)，颜色，背景色，动画（最重要，作用是颜色从重变浅）

3，每一个span单独写css，目的是位置（通过rotate和translate）和延迟时间（animation-delay）。

目测，每一个span里color多余，内部12个公共span的border-radius多余。

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 

<style type="text/css">
.load2 {padding:15px 0;text-align:center;font-size:14px;background:#ffffff;height: 25px;}

@-webkit-keyframes loading {
  from {opacity: 1;}
  to {opacity: 0.2;}
}
.loading {display: inline-block;margin-right:20px;position: relative;width: 12px;height:12px;vertical-align:7px;}
.loading span {display:inline-block;width: 20%;height: 40%;color:#ff7800;background: #ff7800;position: absolute;left: 100%;top: 100%;opacity: 0;-webkit-animation: loading 0.9s linear infinite;-webkit-border-radius: 30px;}
.loading .bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;color:#ff7800;}
.loading .bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;color:#ff7800;}
.loading .bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;color:#ff7800;}
.loading .bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;color:#ff7800;}
.loading .bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;color:#ff7800;}
.loading .bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;color:#ff7800;}
.loading .bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;color:#ff7800;}
.loading .bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
.loading .bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;color:#ff7800;}
.loading .bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;color:#ff7800;}
.loading .bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;color:#ff7800;}
.loading .bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;color:#ff7800;}
</style>

<div class="load2">
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    <label style="cursor:pointer;">正在加载</label>
</div>

原文地址：https://blog.csdn.net/zccst/article/details/84708389?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-10-84708389-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88