[譯] 如何在 5 分鐘以內寫出一個不錯的 loading 界面

• 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。