前言
在前端开发中，有时需要在页面中添加一些等待提示效果，例如加载中、提交中等。为了避免每次开发时都需要重新编写这些效果，我们可以使用 npm 包 component-spinner，来快速添加这些效果。
安装
使用 npm 安装 component-spinner。
--- ------- ----------------- ------
使用
CSS 样式
首先，需要在代码中引入 component-spinner 的 CSS 样式文件。
----- ---------------- --------------------------------------------------------------------
HTML 元素
可以在 HTML 文件中添加 component-spinner 对应的 HTML 元素，例如：
---- ------------------------ ------------------
其中，spinner-md 表示显示的大小是中等（md）、类型为默认样式（如不写则默认为 spinner-default）的等待提示效果。
常用的 component-spinner 样式及对应的类名参考下表：
| 样式 | 类名 |
|---|---|
| 默认（灰色圆点） | spinner-default |
| 中等（灰色圆点） | spinner-md |
| 小型（灰色圆点） | spinner-sm |
| 黑色圆点 | spinner-black |
| 无限旋转图标，类似于 loading | spinner-loading |
| 会动的两端箭头 | spinner-double-arrow |
| 稍微粗一点的两端箭头 | spinner-double-arrow bold |
| 扫描线效果 | spinner-line |
| 旋转的圆形扇形 | spinner-circle |
| 旋转的矩形 | spinner-rect |
| 头像加载效果 | spinner-avatar |
| 翻转的两端箭头 | spinner-reverse-arrow |
| 翻转的两端箭头带方框 | spinner-reverse-arrow rectangle |
| 不间断旋转图标 | spinner-spin |
| 小鸟一唱惊人 | spinner-twitter-bird |
| 史上最强 console.log 效果 | spinner-console（需要设置 data-text） |
JavaScript 控制
除了通过 HTML 元素来控制 component-spinner 的样式以外，还可以通过 JavaScript 来控制其显示和隐藏等效果。
显示 component-spinner
------ - ----------- - ---- -------------------- --------------
隐藏 component-spinner
------ - ----------- - ---- -------------------- --------------
示例代码
下面是一个基本示例代码的实现。
HTML 代码：
--------- -----
------
------
----- ----------------
------------------------ ----------
----- ---------------- --------------------------------------------------------------------
-------
---------- -
------ -----
------- -----
-------- -----
--------------- -------
------------ -------
---------------- -------
---------- ----
-
---- -
------ ------
------- -----
---------- ------
----------- -----
-------- -----
------- --- ----- ------
-------------- ----
----------- -------
------- --------
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------------ ----------- --------------- -------------
---- ----------------------
------
------- --------------------------------------------------------------------------
--------
----- -------- - ----------------------------------
----- ----- - -------------------------------
----- --------- - ---------------------------------------------
------------------------------- ----- -- -- -
-----------------------
-------------------- - ---
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
-----------------------
-------------------- - -----------
---
---------
-------
-------JavaScript 代码：
------ - ------------ ----------- - ---- -------------------- ----- ----- - ------------------------------- ----- --------- - --------------------------------------------- ------------------------------- ----- -- -- - ----------------------- ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ----------------------- -------------------------------------------------- ---
总结
component-spinner 是一个非常实用的 npm 包，可以用于快速添加等待提示效果。通过本文的介绍，你已经掌握了它的基本用法，希望可以帮助到你的前端开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/106880