組件實作 : Demo
今天我們要來製作 Loader 的組件，Loader 組件主要會出現在換頁或是網頁刷新（例如 AJAX）的等待時間，除了讓使用者在等待期間不會太無聊之外，在更新頁面時，也能達到轉場切換的過渡效果；在加載較大的圖片，或是當 JavaScript 處理資料時，也會需要一些緩衝時間，這時候就能使用 Loader 來做緩衝，讓換頁變得更加滑順，那麼事不宜遲，一起往下看吧 !
首先，在 HTML 的<body>中先加入這兩行。
HTML：
<div class="loader"></div><h4>Loading . . .</h4>
顯示結果：
在<style>中先加入下列起手式程式碼，刪除所有多餘的 padding 和 margin，並且使用display flex將畫面置中。
CSS：
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
下列程式碼為圓環的主體，其中animation為轉動的關鍵，需搭配@keyframes使用。
CSS：
.loader {
width: 150px;
height: 150px;
border: 16px solid #6555a0;
border-top: 16px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}
在<style>中用 @keyframes設定相關參數，範圍在 0~100%。
CSS：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframe用法會在之後的動畫篇章中再介紹，這裡注重如何使用就好～
設定「loading …」的樣式與位置。
CSS：
h4 {
font-family: sans-serif;
text-align: center;
margin-top: 32px;
}
當滑鼠移動到「 .loader」的 Class 時，讓動畫暫停轉動（可以不寫這個效果）
CSS：
.loader:hover {
animation-play-state: paused;
cursor: pointer;
}
border-radius主要用於更改正方形 4 個邊的角，radius 值越大，角會越圓，正方形會逐漸變成圓形。
顯示結果：
在 HTML 中先用一個 class 名稱為 loader 的 div，在 CSS 設定 loader 的 width、height 和 border 屬性後，會產生一個正方形，此時將 CSS 的.loader加入border-radius: 50%; 後會渲染出一個圓形，因為只有設定 border 卻沒有設定 background-color 參數，所以在瀏覽器畫面上會顯示一個空心的圓環。
下面幾點可稍微留意：
使用 border-image ，然後設定 border-radius 會無效。
先繪製一個圓型，設定 border，加入一個 Keyframes animation，和一行文字（Loding），搞定！
加入點點點的動畫效果，實現的方式有好幾種【2】，這裡使用動畫的關鍵影格 來去控制 box-shadow，來決定要出現幾個點，這邊要注意的是，我改動了 HTML 的架構（原本的 loader 改成了 loader__img）和 Loading 柱部分，改寫的程式碼如下。
CSS：（起手式）
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
span {
font-family: sans-serif;
text-align: center;
margin-top: 32px;
}
HTML：
<div class="loader">
<div class="loader__img"></div>
<div class="loader__text">
<span>Loading</span><span class="dot"><span>
</div>
</div>
CSS：
.loader__img {
width: 150px;
height: 150px;
border: 16px solid #6555a0;
border-top: 16px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}
.loader__img:hover {
animation-play-state: paused;
cursor: pointer;
}
.loader__text {
font-size: 25px;
text-align: center;
}
.loader__text .dot {
display: inline-block;
min-width: 2px;
min-height: 2px;
box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
animation: dot 2s infinite step-start both;
}
CSS：（動畫效果【3】）
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes dot {
25% {
box-shadow: none;
}
50% {
box-shadow: 2px 0 currentColor;
}
75% {
box-shadow: 2px 0 currentColor, 6px 0 currentColor;
}
}
顯示結果：
值得注意的是animation的影格用法step-start【4】，它可以做到文字 Loading 後面的點點點，呈現一格一格的顯示方式，之後會有一篇書專門說animation用法，這裡先知道有影格這種用法；然後是知道 box-shadow 的用法，之前在實作 Button 時，我們有介紹 box-shadow 的語法，這邊因為要產生 3 個陰影效果，可使用逗點隔開，如下程式碼。
CSS：
box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
2px 0 currentColor意思是 X 軸位移 2 個像素，Y 軸維持不變，currentColor 用法比較特別，它是一個變量，指的是當前預設的顏色，要改變這個顏色，你必須設置 color 的值，意思就是：當 color 值被改變時，currentColor 隨之改變。下面程式碼可以理解currentColor用法。
HTML：
<div class="colors">test</div>
CSS：
* {
color: #aaaaff;
}
.colors {
background: currentcolor;
}
顯示結果：
我們用了一個名為colors的 div，讓它的背景色為currentColor，若改變了預設的color屬性時（預設顏色為黑色 #000），則colors背景色會被改變。
關於 2D 平面圖形的規則，假設有一個矩形視窗有 X 與 Y 軸，視窗左上方為原點（0 , 0），
向右方向為X的增量， 向下為Y軸的增量，反之為減量，X、Y 均可以為負值。
補充說明整個 Loader 形成過程：
在 CSS 中使用一個 Class 名稱為 .loader 的 div，設定寬和高的相同的值，則會產生正方形，而這個正方形不使用 background 的原因，是為了要讓這個 div 呈現與 body 相同顏色，也就是空心背景。這裡使用 border 來設置框線的顏色，border top 則是缺口的部分，實際上 border 可分別控制 top、right、bottom、left 這 4個邊框位置。最後將正方形設定圓形，將 border-radius 設定成 50% 即可。
原本以為這種 Loader 小功能應該會相對容易撰寫，結果有些小細節必須注意，讓我比較意外是想要在 border 屬性加入漸層色 ，是不行直接這樣做的，需要用其他方式來製作漸層。其實，現成的套件做的也很漂亮，如果有看到喜歡的 Loader 樣式，不彷直接的大膽套用吧。今日實作就到這結束，感謝收看！
懶得寫語法，其實插入一張 Gif 圖片，也是一種作法，只是會受限於客製化，像是改文字顏色、背景顏色等等，這裡要看需求而定。
iThome鐵人賽
看影片追技術