? 網(wǎng)絡(luò)上有很多關(guān)于加載效果的文章潦蝇，大部分都比較重復(fù)也比較簡單番捂，比較累贅用踩。這里我總結(jié)了幾種非常常用的渠退，和一款最常見的長短變化的圓環(huán)加載效果。有不同想法的人捶箱，希望能與你交流
?

# 華為手機(jī)的加載動效

? 先來看看我們要做一個什么樣的東東：

剛開始時

加載到一半時

【分析】華為手機(jī)的加載效果由五個大小不同的點(diǎn)組成智什，一開始時是一個點(diǎn)（五個點(diǎn)重疊）动漾，然后大點(diǎn)先出發(fā)丁屎，間隔一定時延 下一個點(diǎn)出發(fā)；轉(zhuǎn)完一圈后旱眯，回到起始位置晨川，等待所有的點(diǎn)都回到起始位置后準(zhǔn)備開始下一次動作。

? 或許聽起來有點(diǎn)復(fù)雜删豺，但其實很簡單共虑，五個點(diǎn)，如果單獨(dú)只看一個點(diǎn)呀页，就得到了網(wǎng)絡(luò)上常說的另一個效果

? 先看這個例子：藍(lán)色的球是運(yùn)動的點(diǎn)妈拌，白色圓環(huán)是球運(yùn)動的軌跡，整體形成了星球環(huán)繞的感覺蓬蝶。這個怎么實現(xiàn)尘分？實現(xiàn)了它，華為手機(jī)的loading效果也就迎刃而解了丸氛。

? 實現(xiàn)的關(guān)鍵點(diǎn)培愁，在于如何制作圓球繞圈轉(zhuǎn)動，這里使用了一個技巧缓窜，即繪制如下圖效果

<div>
  <p></p>
</div>

div {
  width: 10px;
  height: 50px;
  background: lightblue;
}
p {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}

? 因為元素有先上后下定续，先左后右的排列規(guī)則，我們可以很容易得到如上效果禾锤。接著為父元素div添加轉(zhuǎn)動動畫私股，淺藍(lán)色div繞著中心點(diǎn)轉(zhuǎn)動，形成紅色圓圈繞圈轉(zhuǎn)動的直觀感受恩掷。接著倡鲸，去掉div顏色，再添加一個圓環(huán)就可以實現(xiàn)上面星球環(huán)繞的loading效果螃成。

? 如何從星球環(huán)繞效果過渡到華為手機(jī)loading效果旦签？上面已經(jīng)說過查坪，得到一個點(diǎn)的繞圈運(yùn)動后，增加五個直徑不同的點(diǎn)延遲出發(fā)即可宁炫，具體實現(xiàn)如下：

<div class="wrap">
    <div class="fs-ball-holder fs-ball-1">
        <div class="fs-ball-a"></div>
    </div>
    <div class="fs-ball-holder fs-ball-2">
        <div class="fs-ball-b"></div>
    </div>
    <div class="fs-ball-holder fs-ball-3">
        <div class="fs-ball-c"></div>
    </div>
    <div class="fs-ball-holder fs-ball-4">
        <div class="fs-ball-d"></div>
    </div>
    <div class="fs-ball-holder fs-ball-5">
        <div class="fs-ball-e"></div>
    </div>
</div>

.fs-ball-holder {
    position: absolute;
    width: 1rem;
    height: 4rem;
    left: 2rem;
}
.fs-ball-a, .fs-ball-b, .fs-ball-c, .fs-ball-d, .fs-ball-e {
    position: absolute;
    border-radius: 50%;
    background: #3d77e0;
}
.fs-ball-a {
    top: -.75rem;
    left: -.3rem;
    width: .7rem;
    height: .7rem;
}
...

.fs-ball-1 {
    animation: dot-load 1.5s .1s ease infinite;
}
.fs-ball-2 {
    animation: dot-load 1.5s .2s ease infinite;
}
.fs-ball-3 {
    animation: dot-load 1.5s .3s ease infinite;
}
.fs-ball-4 {
    animation: dot-load 1.5s .4s ease infinite;
}
.fs-ball-5 {
    animation: dot-load 1.5s .5s ease infinite;
}
@keyframes dot-load {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

【注意點(diǎn)】避免篇幅過長偿曙，省略去了部分可復(fù)制性CSS代碼，請自行添加羔巢。
（1）設(shè)置大小不同的點(diǎn)的時候望忆，由于CSS元素的排列規(guī)則是從上到下，從左到右竿秆，造成所有點(diǎn)左上角對齊启摄，在動畫執(zhí)行（點(diǎn)開始出發(fā)，和點(diǎn)回到出發(fā)位置）時會有拖尾感幽钢，因此需要對每個點(diǎn)挪動到中心對齊歉备，由于點(diǎn)的display: absolute，這個很容易使用top left實現(xiàn)匪燕。
（2）同樣點(diǎn)大小造成的問題蕾羊，因為點(diǎn)的大小不同，如果設(shè)置每個點(diǎn)出發(fā)的時延一致帽驯，會造成點(diǎn)和點(diǎn)之間的距離不一致龟再，也會影響整體效果，因此需要適當(dāng)調(diào)節(jié)每個點(diǎn)出發(fā)時延大小尼变。
（3）要實現(xiàn)先轉(zhuǎn)好的點(diǎn)回到起始位置需要等待后面的點(diǎn)回來利凑，動畫可以分成兩個step執(zhí)行完成，也可以如上設(shè)置首個點(diǎn)的出發(fā)延遲嫌术，造成前后兩次繞圈的間隔感哀澈。但采用后者有個弊端，如果加載本身時間就很短蛉威，會出現(xiàn)遮罩層出現(xiàn)了日丹，但動畫還沒執(zhí)行的情況。請酌情使用蚯嫌。
?

# 網(wǎng)頁常用加載動效

? 這款加載效果非常簡單哲虾，又非常實用，如下

? 都知道择示，制作一個圓環(huán)只需要用圓角為50%的正方形加上邊框束凑，再設(shè)置box-sizing即可，那這缺了一個角的圓環(huán)栅盲，是很少了一個角的border的圓環(huán)嗎汪诉？答案是否定的。

div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-top: solid 5px #2a2fa0;
    border-right: solid 5px #2a2fa0;
    border-left: solid 5px #2a2fa0;
}

? 很明顯這種效果不是我們想要的，為什么會發(fā)生這個現(xiàn)象扒寄？該例我們設(shè)置了一個圓外加邊框鱼鼓，因此CSS優(yōu)先生成內(nèi)部的圓圖形，為了防止效果的突變该编，CSS會為沒有設(shè)置邊框的邊自動繪制漸變邊框迄本。或許你會說课竣，加box-sizing:border-box試試嘉赎？然而并沒有用，box-sizing: border-box只是將圓圈圖形規(guī)范到邊框上了而已于樟，并沒有真正解決邊框漸變問題公条。

? 要解決這個問題其實很簡單，將某個邊框隱藏即可迂曲。

? CSS通用的隱藏有兩種辦法靶橱，一種是設(shè)置透明opacity，一種是設(shè)置display:none奢米。后者常用在整個選擇器中抓韩，在這里并不是適用纠永。只能用透明鬓长。但是border屬性又沒有類似border-top-opacity屬性怎么辦？

? 大家不要忘了設(shè)置顏色除了十六進(jìn)制方法外尝江，還有 rgba()涉波，這個 a 就是指的透明度。
? 到此為止炭序，我們只要如下設(shè)置即可：

div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border-top: solid 3px #2a2fa0;
    border-right: solid 3px rgba(42,47,160,0);
    border-bottom: solid 3px #2a2fa0;
    border-left: solid 3px #2a2fa0;
    animation: fs-ring-loading 1.5s linear infinite;
}

@keyframes fs-ringball-loading {
    100% {
        transform: rotate(360deg);
    }
}

?

# Ubuntu 開機(jī)加載動效

? ubuntu的開機(jī)加載動效如下所示

上半程

下半程

? 該例的實現(xiàn)也很簡單笨觅，沒有什么技巧可言，設(shè)置五個點(diǎn)耕腾，用動畫控制顏色變化

<div class="wrap ball-light-wrap">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

.ball-light-wrap span {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .5rem;
    background-color: #ffffff;
    animation: fs-balllight-load 6s linear infinite;
}
.ball-light-wrap span:nth-child(1){ animation-delay: .5s; }
.ball-light-wrap span:nth-child(2){ animation-delay: 1s; }
...

@keyframes fs-balllight-load {
    0%, 49.9% {
        background-color: #3d77e0;
    }
    50%, 100% {
        background-color: #ffffff;
    }
}

? 關(guān)于動畫中step见剩，用0%，49.9% 和 50% 扫俺，100% 是實現(xiàn)將漸變修改為突變的一種常見的做法苍苞。因為動畫有漸變過渡模式，用這種方式我們將漸變過程鎖定到49.9%和50%中狼纬。
?

# Windows 開機(jī)加載動效

? 相信大家都見過windows的加載效果羹呵，這里簡要形容一下：

? 五個點(diǎn)先快速從底部鉆出來傻谁，轉(zhuǎn)兩圈繞回到底部隱藏，稍作間隔后簿寂，準(zhǔn)備下一次執(zhí)行换棚。其中，在底部轉(zhuǎn)動速度比在頂部的速度要快涛癌。
? 和華為的loading效果大同小異犯戏，主要是動畫上的區(qū)別，這里需要有出現(xiàn)拳话，然后繞兩圈先匪，最后再隱藏的效果。html和圓圈的css相信大家都會了弃衍，來看看動畫step怎么實現(xiàn)

@keyframes fs-ballhide-load {
    0% {
      opacity: 1;
      transform: rotate(0);
    }
    30% {
      transform: rotate(360deg);
    }
    60% {
      opacity: 1;
      transform: rotate(720deg);
    }
    60.1% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      transform: rotate(720deg);
    }
}

?

# 波浪加載動效

? 這款動效也很常用呀非，一般出現(xiàn)在個人網(wǎng)頁或公司APP中

初始狀態(tài)

執(zhí)行過程

? 實現(xiàn)的思路就是，繪制基本元素即五個矩形镜盯，通過CSS transform: scaleY() 來實現(xiàn)在縱向上的拉伸岸裙，與此同時修改被拉伸元素的顏色即可。很簡答速缆，直接上代碼

<div class="wrap lineboth-wrap">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.lineboth-wrap span {
  width: .5rem;
  height: 1.5rem;
  margin-right: .3rem;
  background: #3d77e0;
  animation: fs-lineboth-load 1s ease-in-out infinite;
}
.lineboth-wrap span:nth-child(2) { animation-delay: .1s; }
.lineboth-wrap span:nth-child(3) { animation-delay: .2s; }
.lineboth-wrap span:nth-child(4) { animation-delay: .3s; }
.lineboth-wrap span:nth-child(5) { animation-delay: .4s; margin-right: 0; }

@keyframes fs-lineboth-load {
  25% {
    transform: scaleY(2.5);
    background-color: antiquewhite;
  }
  50% {
    transform: scaleY(1);
    background-color: #3d77e0;
  }
}

? 關(guān)于波浪加載降允，還有一種效果如下

? 出現(xiàn)這個問題的根本原因是因為在縮放過程中，元素大小發(fā)生變化真慢，由于CSS的定位規(guī)則毅臊，當(dāng)元素加長時會往下?lián)伍_，又因為五個元素都在變化黑界，高度無法形成一致管嬉，因此就有了跳動感。

【辦法】要解決這個問題有兩種辦法园爷，一種是設(shè)置每個小方塊為絕對定位宠蚂，脫離普通文檔流。二是治本童社，設(shè)置輔助塊來實現(xiàn)每一個方塊的高度與輔助塊高度之和固定不變求厕。第一種比較簡單，相信大家差不多都能做出來，來說說第二種

? 所謂的輔助塊呀癣，并不需要去設(shè)置一個div或span美浦。因為是底部對齊，使用margin-top配合動畫step可项栏。

.line-wrap span {
    display: inline-block;
    width: .5rem;
    height: 1rem;
    margin-top: 2rem;
    border-radius: .25rem;
    margin-right: .3rem;
    background-color: #ffffff;
    animation: fs-line-load 1s linear infinite;
}

@keyframes fs-line-load {
  50% {
    height: 2rem;
    margin-top: 1rem;
    background-color: #3d77e0;
  }
  100% {
    height: 1rem;
    margin-top: 2rem;
    background-color: #ffffff;
  }
}

?

# 齒輪加載動效

? 先看看效果圖

【分析】齒輪加載的關(guān)健點(diǎn)在于如何實現(xiàn)繞成一圈的輪牙浦辨，然后對每一個輪牙做顏色漸變即可。原理比較簡單沼沈，實現(xiàn)上有比較多的細(xì)節(jié)需要計算流酬。

【實現(xiàn)辦法】齒輪的實現(xiàn)有兩種辦法：
（1）繪制如圖八個輪牙，借助transform:rotate()對需要傾斜放置的輪牙做旋轉(zhuǎn)列另，用position:absolute和left right做位置偏移芽腾。這種辦法數(shù)據(jù)計算偏多。
（2）這種辦法稍微簡單些页衙，原理同華為手機(jī)loading效果模塊講解的相同摊滔，繪制一個父元素div用來承載輪牙，在div的兩頭繪制兩個輪牙店乐，其他輪牙同理艰躺。這種該辦法我們只需要管理父元素div的旋轉(zhuǎn)角度即可。

? 這里給出我的一個方案1的實現(xiàn)案例眨八，html部分和上例類似腺兴。

.geer-wrap span {
  display: inline-block;
  width: 1rem;
  height: .5rem;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
  background-color: #ffffff;
  position: absolute;
  animation: fs-geer-load 1.04s linear infinite;
}
.geer-wrap span:nth-child(1) {
  left: 0;
  top: 50%;
  animation-delay: .13s;

}
.geer-wrap span:nth-child(2) {
  left: 10%;
  top: 20%;
  transform: rotate(45deg);
  animation-delay: .26s;
}
.geer-wrap span:nth-child(3) {
  left: 40%;
  top: 10%;
  transform: rotate(90deg);
  animation-delay: .39s;
}
.geer-wrap span:nth-child(4) {
  right: 10%;
  top: 20%;
  transform: rotate(135deg);
  animation-delay: .52s;
}
.geer-wrap span:nth-child(5) {
  right: 0;
  top: 50%;
  transform: rotate(180deg);
  animation-delay: .65s;
}
.geer-wrap span:nth-child(6) {
  right: 10%;
  bottom: 10%;
  transform: rotate(225deg);
  animation-delay: .78s;
}
.geer-wrap span:nth-child(7) {
  left: 40%;
  bottom: 0;
  transform: rotate(270deg);
  animation-delay: .91s;
}
.geer-wrap span:nth-child(8) {
  left: 10%;
  bottom: 10%;
  transform: rotate(315deg);
  animation-delay: 1.04s;
}
@keyframes fs-geer-load {
  0% {
    background-color: #3d77e0;
  }
  100% {
    background-color: #ffffff;
  }
}

?

# 經(jīng)典壓軸 - 長短變化的圓環(huán)加載動效

? 真的是到處都是這個效果，但是去百度上找了一圈都沒找到實現(xiàn)案例踪古。經(jīng)過自己的折騰含长，寫了兩種實現(xiàn)方式，分享給大家伏穆。

方案1：利用左右兩個半圓擋板按一定規(guī)律顯示隱藏來展示背景顏色，再加上有效半圓轉(zhuǎn)過面積來實現(xiàn)小于半圓和大于半圓時的不同角度效果

? 先看以下案例：

上半程

下半程

【材料】一個粉色的底部圓盤纷纫，一個粉色的半圓枕扫，兩個淺綠色的半圓。其中辱魁，底部圓盤z-index最小烟瞧，粉色圓盤夾在兩個淺綠色半圓中間。

【思路】
? 借用一下張鑫旭大神的幾張分解圖染簇，解釋的非常到位.

? 注意参滴，我們只需要轉(zhuǎn)動其中一個半圓，其余的只需要控制顯示隱藏即可锻弓。

? 1. 剛開始轉(zhuǎn)動的時候砾赔，隱藏半個擋板

? 2. 轉(zhuǎn)動一半時，能看到半個圓了，此時暴心，準(zhǔn)備顯示剛隱藏的擋板

3. 將半個最高層淺綠色的擋板隱藏妓盲，顯示原先被隱藏的擋板，如下

   
   

4. 最終轉(zhuǎn)動到整個圓全部顯示专普，如下

   
   

? 思路明確了就簡單了悯衬，我們來看看代碼實現(xiàn)：

<div class="wrap cake-wrap">
    <div class="mask-plate">
      <div class="spin-cake"></div>
      <div class="fixed-mask"></div>
      <div class="fixed-cake"></div>
    </div>
</div>

.mask-plate {
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: hotpink;
    animation: hide2show 6s linear infinite;
    opacity: 1;
}
.spin-cake {
    position: absolute;
    width: 2.5rem;
    height: 5rem;
    border-radius: 2.5rem 0 0 2.5rem;
    transform-origin: right;
    background: aquamarine;
    animation: spinner 3s linear infinite;
}
.fixed-mask {
    position: absolute;
    width: 2.5rem;
    height: 5rem;
    border-radius: 2.5rem 0 0 2.5rem;
    background: hotpink;
    animation: show2hide 3s linear infinite;
}
.fixed-cake {
    position: absolute;
    left: 50%;
    width: 2.5rem;
    height: 5rem;
    border-radius: 0 2.5rem 2.5rem 0;
    background: aquamarine;
    animation: hide2show 3s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes show2hide {
  0%, 49.9% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes hide2show {
  0%, 49.9% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

? 其實到這里還沒結(jié)束，該效果你會看到粉色圓轉(zhuǎn)好了之后檀夹，立馬就從頭開始筋粗，體驗并不好。于是我們還需要再實現(xiàn)一套由粉色圓轉(zhuǎn)出淺綠色圓的炸渡。代碼一樣亏狰，不再贅述。

? 實現(xiàn)以上餅轉(zhuǎn)效果之后偶摔，相信你已經(jīng)想到怎么實現(xiàn)長短變化的圓環(huán)loading效果了暇唾。沒錯，只需要把圓改成圓環(huán)辰斋，半圓改成半圓環(huán)就好可以了策州。

方案2 利用偽元素：:after 和 :before 實現(xiàn)對整個圓環(huán)的遮擋效果來實現(xiàn)

很容易看懂兩個半圓與底部白色圓環(huán)之間的關(guān)系，通過控制兩個半圓的旋轉(zhuǎn)速度差來實現(xiàn)露出部分圓環(huán)的大小宫仗。

上代碼

<div class="wrap rollelongate-wrap">
  <span></span>
</div>

.rollelongate-wrap span {
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: .5rem solid #ffffff;
  animation: fs-rollelongate-parent-load 5s linear infinite;
}
.rollelongate-wrap span:before {
  width: 3rem;
  height: 5.5rem;
  border-radius: 5.5rem 0 0 5.5rem;
  background-color: #c3c3c3;
  position: absolute;
  /*top: -.3rem;*/   /*如果.rollelongate-wrap span的animation不開用這個*/
  top: -.8rem;
  left: -.9rem;
  content: '';
  transform-origin: right center;
  -webkit-transform-origin: right center;
  transform: rotate(20deg);
  animation: fs-rollelongate-load 1.6s ease infinite;
  -webkit-animation: fs-rollelongate-load 1.6s ease infinite;
}
.rollelongate-wrap span:after {
  width: 3rem;
  height: 5.5rem;
  border-radius: 0 5.5rem 5.5rem 0;
  background-color: #c3c3c3;
  position: absolute;
  /*top: -.2rem;*/   /*如果.rollelongate-wrap span的animation不開用這個*/
  top: -.8rem;
  content: '';
  transform-origin: left center;
  -webkit-transform-origin: left center;
  animation: fs-rollelongate-load 1.6s .3s ease infinite;
  -webkit-animation: fs-rollelongate-load 1.6s .3s ease infinite;
}
@keyframes fs-rollelongate-load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes fs-rollelongate-parent-load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

# 后語

? 編輯上有點(diǎn)粗糙還望大家見諒够挂，沒有找到合適的制作gif的軟件，只能分解動態(tài)圖給大家看藕夫，如果還有不理解的地方孽糖，歡迎來交流。