自制css3 Loading

作者: Mo_Han | 来源:发表于2019-03-04 09:58 被阅读0次

自制css3 Loading
Facebook loading animation using
CSS3 loading加载动画
CSS 各种loading 实现
超酷的 CSS3 loading 预加载动画特效
css3 loading
css3 loading
Ajax Loading Style
css3 loading按钮
使用CSS3实现loading动画

无论什么请求，总有那么一段等待请求响应de时间。如果等待loading使用.gif的图片来代替，那么这里就又会多一次http请求。为了提高性能。我们可以使用css3来达到效果。

原理:

通过2D转变图标的状态，然后对其从0~100%的过渡时间段内施加一段转变效果，然后让图标重复此前的动作，即完成了。

所用相关的技术：

使用到css3的transform(转变),transition(过渡)，animation(动画)。此处我写了4种。

代码：

第一种效果如下：

.html代码

<div class="box"> 
    <div class="loading1">
        <i></i> 
    </div>
</div>

.css代码

.box { width: 100%; }/* display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 div 的中部。 首先利用 display 属性将div 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。*/ 
.loading1 { 
    width: 30%; 
    height: 250px; 
    border: 1px solid #11CD6E; 
    box-sizing: border-box; 
    margin: 10px auto;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.loading1 i { 
    width: 35px; 
    height: 35px; 
    position: relative; 
    display: block; 
    border-radius: 50%; 
    background: linear-gradient(transparent 0%, transparent 70%, #333333 70%, #333333 100%); /*设置0~70%为透明，70%~100%为灰色 */
    -webkit-animation: loading1 1s linear 0s infinite;
    -moz-animation: loading1-moz 1s linear 0s infinite; 
} 
@-webkit-keyframes loading1 { 
    0% { transform: rotate(0deg); } 
    50% { transform: rotate(180deg); } 
    100% { transform: rotate(360deg); } 
}
@-moz-keyframes loading1-moz{ 
    0% { transform: rotate(0deg); } 
    50% { transform: rotate(180deg); } 
    100% { transform: rotate(360deg); } 
}

第二种效果如下：

.html代码

<div class="box"> 
    <div class="loading2"> 
        <i></i> 
        <i></i> 
        <i></i> 
        <i></i> 
        <i></i> 
    </div> 
</div>

.css代码

.box { width: 100%; }/* display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 div 的中部。 首先利用 display 属性将div 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。*/ 
.loading2 {
    width: 30%; 
    height: 250px; 
    border: 1px solid #11CD6E; 
    box-sizing: border-box; 
    margin: 50px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.loading2 i { 
    width: 6px; 
    height: 32px; 
    margin-right: 6px; 
    border-radius: 4px; 
    background-color: #333333; 
}

.loading2 i:nth-child(1){ -webkit-animation:loading2 1s linear 0s infinite; }
.loading2 i:nth-child(2){ -webkit-animation:loading2 1s linear 0.2s infinite; } 
.loading2 i:nth-child(3){ -webkit-animation:loading2 1s linear 0.4s infinite; } 
.loading2 i:nth-child(4){ -webkit-animation:loading2 1s linear 0.6s infinite; } 
.loading2 i:nth-child(5){ -webkit-animation:loading2 1s linear 0.8s infinite; } 

@-webkit-keyframes loading2 { 
    0% { transform : scale(1,1); } 
    50% { transform: scale(1,0.5); } 
    100% { transform : scale(1,1); } 
}

第三种效果如下：

.html代码

<div class="box"> 
    <div class="loader"> 
        <div class="loading3"> 
            <i></i> 
            <i></i> 
            <i></i> 
            <i></i> 
            <i></i> 
            <i></i> 
            <i></i> 
            <i></i> 
        </div> 
    </div> 
</div>

.css代码

/* display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 div 的中部。 首先利用 display 属性将div 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。*/ 
.loader { 
    width: 30%; 
    height: 250px; 
    margin: 10px auto; 
    border: 1px solid #11CD6E; 
    box-sizing: border-box; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
/* 父元素在8个圆点中间，设置为相对定位。*/ 
.loading3 { position: relative; } 
.loading3 i { 
    display: block;
    width: 10px; 
    height: 10px; 
    background-color: #333333; 
    border-radius: 50%; 
    position: absolute; 
} 
.loading3 i:nth-child(1) { 
    top: 25px; 
    left: 0px; 
    -webkit-animation: loading3 1s linear 0.84s infinite; 
}
.loading3 i:nth-child(2) { 
    top: 17px; 
    left: 17px; 
    -webkit-animation: loading3 1s linear 0.72s infinite; 
} 
.loading3 i:nth-child(3) { 
    top: 0px; 
    left:25px; 
    -webkit-animation: loading3 1s linear 0.6s infinite; 
}
.loading3 i:nth-child(4) { 
    top:-17px; 
    left: 17px; 
    -webkit-animation: loading3 1s linear 0.48s infinite; 
 } 
.loading3 i:nth-child(5) { 
    top: -25px; 
    left: 0px; 
    -webkit-animation: loading3 1s linear 0.36s infinite; 
} 
.loading3 i:nth-child(6) { 
    top: -17px; 
    left: -17px; 
    -webkit-animation: loading3 1s linear 0.24s infinite; 
} 
.loading3 i:nth-child(7) { 
    top: 0px; 
    left: -25px; 
    -webkit-animation: loading3 1s linear 0.12s infinite; 
} 
.loading3 i:nth-child(8) { 
    top: 17px; 
    left: -17px; 
    -webkit-animation: loading3 1s linear 0s infinite; 
} 
@-webkit-keyframes loading3{ 
    0% { 
        transform: scale(0,0); 
        opacity: 0.3; 
    } 
    100% {
         transform: scale(1,1); 
         opacity: 1; 
    } 
}

第四种效果如下：

.html代码

<div class="box"> 
    <div class="loading4"> 
        <div class="loader4"> </div> 
    </div> 
</div>

.css代码

.box { width: 100%; }/* display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 div 的中部。 首先利用 display 属性将div 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。*/ 
.loading4 { 
    width: 30%; 
    height: 250px; 
    border: 1px solid #11CD6E; 
    box-sizing: border-box; 
    margin: 50px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.loader4 { 
    width:100px; 
    height: 100px; 
    border-radius: 50%; 
    border:1px solid #BBBABA; 
    position: relative; 
    border-width: 4px; 
} 
.loader4:before { 
    width: 35px; 
    height: 4px; 
    top: 50%; 
    left: 50%; 
    position: absolute; 
    content: ""; 
    border-radius: 4px; 
    background-color: #BBBABA; 
    transform-origin: 2px 2px 0; 
    -webkit-animation: before 10s linear 0s infinite; 
} 
.loader4:after { 
    width: 45px; 
    height: 5px; 
    top: 50%; 
    left: 50%; 
    position: absolute; 
    content: ""; 
    background-color: #BBBABA; 
    transform-origin: 2px 2px 0; 
    -webkit-animation: after 2s linear 0s infinite; 
    border-radius: 4px; 
} 
@-webkit-keyframes before { 
    0% { transform: rotate(0); } 
    100% { transform: rotate(360deg); } 
} 
@-webkit-keyframes after {   
    0% { transform: rotate(0); } 
    100% { transform: rotate(360deg); } 
}