[譯] 如何在 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。