[译] 如何在 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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。