- 原文地址：How to Build a Delightful Loading Screen in 5 Minutes
- 原文作者：Ohans Emmanuel
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：whuzxq
- 校對者：luochen1992、ALVINYEH
首先，讓我們先看一下效果圖。
這就是我們將要實現的 DEMO。
是不是覺得看起來很眼熟？
如果眼熟的話，那你可能在 Slack 上見過它！
讓我們只使用 css 和 html，來實現一下這個 loading 頁面吧！
如果你想小試身手，可以在 Codepen 上建立一個 pen，編寫教程程式碼。
現在，讓我們開始吧！
1. 新增 class 作為標記
html 部分很簡單，如下面程式碼所示：
<section class="loading">
For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme
<span class="loading__author"> - Your friends at Slack</span>
<span class="loading__anim"></span>
</section>
複製程式碼是不是很簡單？
如果你不清楚為什麼類名中出現了破折號，我在 這篇文章 中解釋了背後的原因。
現在我們有一些文字，以及一個類名為 loading_anim 的 span 標籤。
效果圖如下：
還不賴，對吧？
2. 將內容居中
現在的效果並不理想，下一步我們將 class 為 .loading 的 session 標籤在頁面上居中。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
複製程式碼現在居中了！
有沒有看起來好一點？
3. 設定載入文字的樣式
現在，讓我們設定 class 為 .loading 的文字樣式，使其看上去更棒。
.loading {
max-width: 50%;
line-height: 1.4;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
複製程式碼4. 設定下方 .loading_author 的樣式
.loading__author {
font-weight: normal;
font-size: 0.9rem;
color: rgba(189,189,189 ,1);
margin: 0.6rem 0 2rem 0;
display: block;
}
複製程式碼看看效果！
5. 建立 loading 動畫
終於到了備受期待的一步。這是最長的一個步驟，在此之前我會花一些時間確保你瞭解它的工作原理。
如果您遇到困難，請發表評論，我很樂意提供幫助。
再回顧一遍 loading 的效果。
我們可以看到 loading 圓環一半是藍色，另一半是灰色的。預設情況下，HTML 元素不會被切分。所有HTML元素可以看作盒子。第一個真正的挑戰是如何使 class 為 .loading__anim 的元素包含兩種邊框顏色。
如果你現在還沒有太明白，不要擔心。後面會繼續進行講解。
首先，讓我們先定義 loading 的大小。
.loading__anim {
width: 35px;
height: 35px;
}
複製程式碼現在，loading 元件與文字位於同一行，這是因為 span 標籤是 html 中的內聯元素。
我們現在修改樣式，使其在另一行展示。
.loading__anim {
width: 35px;
height: 35px;
display: inline-block;
}
複製程式碼最後，讓我們為其設定 border 屬性。
.loading__anim {
width: 35px;
height: 35px;
display: inline-block;
border: 5px solid rgba(189,189,189 ,0.25);
}
複製程式碼在元素周圍會形成寬度為 5px 的灰色邊框。
下方為效果圖。
顯示出一個灰色的邊框。
讓我們繼續完善它。
一個元素有四條邊，top、bottom、left 和 right。
我們之前設定的 border 對四個邊都實現了相同的渲染。
我們現在需要對 loading 元件的邊框設定不同的顏色。
無論你選擇哪條邊都可以，在下方程式碼中以 top 和 left 舉例演示。
.loading__anim {
width: 35px;
height: 35px;
display: inline-block;
border: 5px solid rgba(189,189,189 ,0.25);
border-left-color: rgba(3,155,229 ,1);
border-top-color: rgba(3,155,229 ,1);
}
複製程式碼現在，left 和 top 邊界將呈現藍色。效果圖如下：
看起來還可以。
我們馬上要成功了！
這個 loading 元件是圓的，而不是方的。讓我們通過給 .loader__anim 元件設定 border-radius 屬性為 50%，來改變它的形狀。
效果圖如下：
不是很差，是吧？
最後一步是製作動畫。
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
複製程式碼希望您對 CSS 動畫 有所瞭解。1 turn 等於 360 deg，表示完整的轉了一個 360 度的圈。
並按如下方式使用：
animation: rotate 600ms infinite linear;
複製程式碼喲！我們做到了！
請看最終效果圖。
lo hicimos! (西班牙語)
是不是很酷？
如果有任何步驟使您困惑，請發表評論，我很樂意提供幫助。
想要進階學習？
我已經建立了一個免費的 CSS 指南，以便您能立刻掌握 CSS 技能。獲取電子書。
你不知道的七個 css 祕密。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。