使用CSS3來製作各種loading

在網頁開發過程中，有加載的存在，就有loading的存在，在傳統網頁開發過程中，通常都是設計師設計loading樣式，做成gif的形式，這種方式固然很好，但是使用css3製作loading加載速度更加的快，樣式也便於控制。

製作loading方法和樣式很多，本篇文章只是提供一個簡單製作的思路，時間有限，所以一些瀏覽器可能存在兼容性問題。

首先看一下加載效果圖

1，實心加載loading和實心帶箭頭loading

<div class="loading-rotate-full"></div>
<div class="loading-rotate-full arrow"></div>

.loading-rotate-full {
    width: 30px;
    height: 30px;
    border: 3px solid #777;
    border-top-color: transparent;
    border-radius: 50%;
    -webkit-animation: rotate 1s linear infinite;
    box-sizing: border-box;
}
.loading-rotate-full.arrow:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    border: 7px solid;
    box-sizing: border-box;
    border-color: #777 #777 transparent transparent;
}
@-webkit-keyframes rotate{
    from{
        -webkit-transform: rotate(0);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

注意：加載動畫的方式由animation-timing-function決定，除了linear勻速加載外，其他的方式都有一個短暫的停留過程！

2，部分旋轉loading和停留位置變化loading

<div class="loading-rotate"></div>
<div class="loading-rotate lazy"></div>

.loading-rotate {
    position: relative;
    width: 30px;
    height: 30px;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate linear 1s infinite;
    transform-origin:center center;
    box-sizing: border-box;
}       
.loading-rotate:before {
    content: "";
    position: absolute;
    left: 0;  top: 0;
    width: 100%;  height: 100%
    box-sizing: border-box;
    border: 3px solid transparent;
    border-top-color: #ff4500;
    border-radius: 50%;
    z-index: 10;
}
.loading-rotate:after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 30px;  height: 30px;
    border: 3px solid #ddd;
    box-sizing: border-box;
    border-radius: 50%;
}
/*旋轉位置不停變化*/
.loading-rotate.lazy {
    -webkit-animation: rotate-lazy 6s ease-in-out infinite;
    animation: rotate-lazy ease-in-out 6s infinite;
}    
@-webkit-keyframes rotate-lazy{
    0{
        -webkit-transform: rotate(0);
    }
    25%{
        -webkit-transform: rotate(450deg);
    }
    50%{
        -webkit-transform: rotate(900deg);
    }
    75%{
        -webkit-transform: rotate(1350deg);
    }
    100%{
        -webkit-transform: rotate(1800deg);
    }       
}

停留位置變化loading的原理是每次旋轉上一次的度數+旋轉變化的位置，我的是每次比上次多旋轉90deg。

3，列loading

<div class="loading-list">
    <i class="load-list-aside" style="background-color: #ff4500;"></i>
    <i class="load-list-middle" style="background-color: green;"></i>
    <i class="load-list-aside" style="background-color: #F012BE;"></i>
</div>

.loading-list {
    width: 50px;
    height: 30px;
}
.loading-list i {
    display: inline-block;
    margin: 10px 3px;
    height: 14px;
    width: 4px;
    background: #ddd;
}
.loading-list .load-list-aside {
    -webkit-animation: line-aside 1s linear infinite;
}

.loading-list .load-list-middle {
    -webkit-animation: line-middle 1s linear infinite;
}

@-webkit-keyframes line-aside {
    0%{
        -webkit-transform: scale(0);
    }
    50%{
        -webkit-transform: scale(1);
    }
    100%{
        -webkit-transform: scale(0);
    }
}

@-webkit-keyframes line-middle {
    0%{
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-transform: scale(0);
    }
    100%{
        -webkit-transform: scale(1);
    }
}

預覽demo