在前端开发中，我们经常需要等待某个异步操作完成后再进行下一步操作，比如数据获取、图片加载等等。为了提升用户体验，我们通常会在页面上添加一个加载动画，告诉用户程序正在努力工作中。
这篇文章将介绍一种非常流行的加载动画：Dot dotdot dotdotdot（以下简称 Dots），它是由一系列的圆点组成，依次显示、消失，产生一种“闪烁”的效果，让人联想到程序正在运行的状态。
实现
Dots 动画可以通过 CSS 实现，但是这篇文章主要介绍如何用 JavaScript 实现 Dots 加载动画。
首先，我们需要定义一个包含若干圆点的容器，比如一个 <div> 元素，并设置它的样式：
------------------ - -------- ----- ---------------- ------- ------------ ------- ------- ------ -
接着，我们在容器中添加若干个圆点，每个圆点都是一个 <span> 元素，并设置它们的样式：
---- -
------ -----
------- -----
------- - ----
-------------- ----
----------------- -----
-------- --
--------------- -----------
------------------- -----
-------------------------- ---------
-------------------- -----
-
---------- ---------- -
---
----
---- -
-------- --
---------- -----------
-
--- -
-------- --
---------- ---------
-
-这里我们使用了 CSS 的动画特性（animation），让每个圆点在 1.3 秒内完成一次显示和消失的过程。
最后，我们需要编写 JavaScript 代码来控制圆点的显示和消失。以下是一个简单的实现：
----- ---- - ----------------------------------
--- ---------- - --
-------- ------------- -
-- ----------- -- ------------ -
---------- - --
-
------------------------------ - ----
-------------
-
-------------- -- -
------------------------------ -- -
----------------- - ----
---
--------------
-- ------我们通过 setInterval 定时器不断地循环执行 showNextDot 函数，该函数会将下一个圆点设为可见，并将当前圆点索引加一。当当前圆点索引超出圆点数组的长度时，我们将其重置为 0。
指导意义
Dots 加载动画是一种简单而又实用的加载动画，可以为用户提供良好的体验。本文介绍了如何用 JavaScript 实现 Dots 动画，但是实现方式并不局限于此，可以根据需求进行适当的调整和改进。同时，我们还可以将 Dots 加载动画应用于异步操作的处理中，让用户知晓程序正在工作。
最后，完整的示例代码如下：
---- --------------------------
----- -------------------
----- -------------------
----- -------------------
------
-------
------------------ -
-------- -----
---------------- -------
------------ -------
------- ------
-
---- -
------ -----
------- -----
------- - ----
-------------- ----
----------------- -----
-------- --
--------------- -----------
------------------- -----
-------------------------- ---------
-------------------- -----
-
---------- ---
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------