Dot dotdot dotdotdot 作为 JS 中的加载动画？

在前端开发中，我们经常需要等待某个异步操作完成后再进行下一步操作，比如数据获取、图片加载等等。为了提升用户体验，我们通常会在页面上添加一个加载动画，告诉用户程序正在努力工作中。

这篇文章将介绍一种非常流行的加载动画：Dot dotdot dotdotdot（以下简称 Dots），它是由一系列的圆点组成，依次显示、消失，产生一种“闪烁”的效果，让人联想到程序正在运行的状态。

实现

Dots 动画可以通过 CSS 实现，但是这篇文章主要介绍如何用 JavaScript 实现 Dots 加载动画。

首先，我们需要定义一个包含若干圆点的容器，比如一个 <div> 元素，并设置它的样式：

------------------ -
  -------- -----
  ---------------- -------
  ------------ -------
  ------- ------
-

接着，我们在容器中添加若干个圆点，每个圆点都是一个 <span> 元素，并设置它们的样式：

---- -
  ------ -----
  ------- -----
  ------- - ----
  -------------- ----
  ----------------- -----
  -------- --
  --------------- -----------
  ------------------- -----
  -------------------------- ---------
  -------------------- -----
-

---------- ---------- -
  ---
  ----
  ---- -
    -------- --
    ---------- -----------
  -
  --- -
    -------- --
    ---------- ---------
  -
-

这里我们使用了 CSS 的动画特性（animation），让每个圆点在 1.3 秒内完成一次显示和消失的过程。

最后，我们需要编写 JavaScript 代码来控制圆点的显示和消失。以下是一个简单的实现：

----- ---- - ----------------------------------
--- ---------- - --

-------- ------------- -
  -- ----------- -- ------------ -
    ---------- - --
  -
  ------------------------------ - ----
  -------------
-

-------------- -- -
  ------------------------------ -- -
    ----------------- - ----
  ---
  --------------
-- ------

我们通过 setInterval 定时器不断地循环执行 showNextDot 函数，该函数会将下一个圆点设为可见，并将当前圆点索引加一。当当前圆点索引超出圆点数组的长度时，我们将其重置为 0。

指导意义

Dots 加载动画是一种简单而又实用的加载动画，可以为用户提供良好的体验。本文介绍了如何用 JavaScript 实现 Dots 动画，但是实现方式并不局限于此，可以根据需求进行适当的调整和改进。同时，我们还可以将 Dots 加载动画应用于异步操作的处理中，让用户知晓程序正在工作。

最后，完整的示例代码如下：

---- --------------------------
  ----- -------------------
  ----- -------------------
  ----- -------------------
------

-------
  ------------------ -
    -------- -----
    ---------------- -------
    ------------ -------
    ------- ------
  -

  ---- -
    ------ -----
    ------- -----
    ------- - ----
    -------------- ----
    ----------------- -----
    -------- --
    --------------- -----------
    ------------------- -----
    -------------------------- ---------
    -------------------- -----
  -

  ---------- ---

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • A list of cool Chrome DevTools Tips and Tricks

    A List of Cool Chrome DevTools Tips and Tricks Chrome DevTools is a powerful set of tools that can h...

    6 年前
  • jQuery Validate - 基于用户选择设置条件规则

    介绍 jQuery Validate 是一款流行的前端表单验证插件，它可以帮助我们轻松地添加表单验证功能。在这篇文章中，我们将讨论如何基于用户选择来设置条件规则，以便更灵活地校验表单数据。

    6 年前
  • JavaScript中的垃圾回收机制

    在JavaScript中，内存管理是一个重要的话题。内存泄漏和未释放的内存会导致应用程序性能问题，甚至导致浏览器崩溃。为了解决这些问题，JavaScript引擎使用垃圾回收机制来自动管理内存。

    6 年前
  • 在 MVC Razor 中共享 C# 和 Javascript 常量

    在前端开发中，我们经常需要在 C# 后端和 Javascript 前端之间共享常量。在 MVC Razor 中，可以使用以下方法来实现。 在 C# 中声明常量 首先，在 C# 中声明常量。

    6 年前
  • 如何在 JavaScript 中点击按钮后显示 div？

    在前端开发中，常常需要通过点击按钮来触发某些操作和交互效果。其中一个常见的需求是点击按钮后显示或隐藏一个 div 元素。本文将介绍如何使用 JavaScript 实现这个功能。

    6 年前
  • 在 TypeScript 中声明数组

    简介 TypeScript 是一种静态类型的 JavaScript 超集，它允许开发人员为代码添加类型注释，并且在编译时检查类型错误。在 TypeScript 中，可以使用数组来存储和操作数据。

    6 年前
  • 如何检查一个字符串是否为浮点数？

    在编写前端代码时，我们经常需要检查一个字符串是否能够转换为浮点数。这个问题并不是那么简单，因为一个字符串可能包含多种不同的字符和符号。 方法一：使用 isNaN 函数 JavaScript 中有一个内...

    6 年前
  • 当通过 Ajax 加载 HTML 页面时，是否会加载脚本标签？

    当使用 AJAX（Asynchronous JavaScript and XML）技术来异步加载 HTML 页面时，通常情况下，在页面的 标签中包含的 JavaScript 代码不会被自动执行和加载...

    6 年前
  • 在前端中添加逗号或空格以分组每三位数字

    在前端开发中，我们常常需要格式化数字，以方便用户查看和理解。其中一个常见的需求是将长数字分组为每三个一组，并添加逗号或空格作为分隔符，比如将1000000显示为1,000,000。

    6 年前
  • AngularJS中的换行字符串，如何在不换行的情况下显示

    当我们在AngularJS应用程序中处理多行文本时，我们可能需要将多个字符串合并成一个，并以某种方式显示，而不会丢失原始字符串中的换行符。在本文中，我们将介绍如何使用AngularJS操作多行字符串，...

    6 年前
  • 如何使用MVC4和Razor设置JavaScript变量

    在前端开发中，我们经常需要使用JavaScript来操作DOM元素或发送AJAX请求等。而在使用JavaScript时，需要定义一些变量来存储数据或状态。本文将介绍如何使用MVC4和Razor来设置J...

    6 年前
  • 哪个JavaScript压缩器（cruncher）与Google用于其JS API的相同？

    在前端开发过程中，我们经常需要使用JavaScript代码。但是，当我们将代码部署到生产环境时，我们通常会使用JavaScript压缩器来减小文件大小并提高页面加载速度。

    6 年前
  • 移除HTML元素的所有属性

    在前端开发中，有时需要将HTML元素的所有属性移除。这可能是因为需要重新设置元素属性，或者因为需要从HTML文档中删除特定的属性。 本文将介绍如何使用JavaScript和jQuery来移除HTML元...

    6 年前
  • Bootstrap 轮播图的宽度和高度

    Bootstrap 是一个流行的前端框架，提供了许多实用的组件和工具，其中包括可以轻松创建幻灯片或轮播图的 Carousel 组件。在使用 Bootstrap Carousel 时，设置正确的宽度和高...

    6 年前
  • 如何在 Backbone 应用程序中刷新页面

    Backbone 是一个流行的 JavaScript 应用程序框架，它允许您构建单页应用程序（SPA）并管理数据和用户交互。在 SPA 中，页面不会经常刷新，而是使用 Ajax 和 JavaScrip...

    6 年前
  • JavaScript 中创建 1 到 20 的整数数组的最简方式

    在 JavaScript 中创建一个包含 1 到 20 的整数数组是一项常见的任务。下面介绍两种方法，它们都具有简洁性和可读性。 方法 1: Array.from() ES6 的 Array.from...

    6 年前
  • jQuery：如果HREF包含...

    在前端开发中，经常需要使用jQuery来操作DOM元素。其中一个常见的需求是根据元素的属性值来执行某些操作。如果我们想要针对所有包含特定字符串的href属性进行操作，该怎么做呢？ 解决方案 使用 jQ...

    6 年前
  • Button onclick 函数触发两次问题解析

    当我们在编写前端代码时，经常会遇到按钮点击事件（onclick）触发两次的问题。这种情况通常很难调试和解决，因为看起来代码没有任何问题。本文将详细介绍这个问题的原因，并提供一些解决方案。

    6 年前
  • 如何从JavaScript函数中退出？[重复]

    在编写JavaScript函数时，我们经常需要从函数中退出。这可以是因为某些条件已经满足，或者因为我们不再需要执行该函数的其余部分。在本文中，我们将讨论如何从JavaScript函数中退出，并提供一些...

    6 年前
  • 如何parseInt带前导零的字符串

    在JavaScript中，parseInt()函数可以用于将字符串转换为整数。但是，当我们尝试将一个带有前导零的字符串传递给parseInt()时，会遇到一些问题。

    6 年前

相关推荐

    暂无文章