前言
在前端开发中，有时需要在页面中添加一些等待提示效果，例如加载中、提交中等。为了避免每次开发时都需要重新编写这些效果，我们可以使用 npm 包 component-spinner，来快速添加这些效果。
安装
使用 npm 安装 component-spinner。
npm install component-spinner --save
使用
CSS 样式
首先，需要在代码中引入 component-spinner 的 CSS 样式文件。
<link rel="stylesheet" href="node_modules/component-spinner/css/component-spinner.min.css">
HTML 元素
可以在 HTML 文件中添加 component-spinner 对应的 HTML 元素，例如：
<div class="component-spinner spinner-md"></div>
其中，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
import { showSpinner } from 'component-spinner';
showSpinner();隐藏 component-spinner
import { hideSpinner } from 'component-spinner';
hideSpinner();示例代码
下面是一个基本示例代码的实现。
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ----------
----- ---------------- --------------------------------------------------------------------
-------
---------- -
------ -----
------- -----
-------- -----
--------------- -------
------------ -------
---------------- -------
---------- ----
-
---- -
------ ------
------- -----
---------- ------
----------- -----
-------- -----
------- --- ----- ------
-------------- ----
----------- -------
------- --------
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------------ ----------- --------------- -------------
---- ----------------------
------
------- --------------------------------------------------------------------------
--------
----- -------- - ----------------------------------
----- ----- - -------------------------------
----- --------- - ---------------------------------------------
------------------------------- ----- -- -- -
-----------------------
-------------------- - ---
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
-----------------------
-------------------- - -----------
---
---------
-------
-------JavaScript 代码：
-- -------------------- ---- ------- ------ - ------------ ----------- - ---- -------------------- ----- ----- - ------------------------------- ----- --------- - --------------------------------------------- ------------------------------- ----- -- -- - ----------------------- ----- -------- - ----- ------------------------------------------------------ ----- ---- - ----- ---------------- ----------------------- -------------------------------------------------- ---
总结
component-spinner 是一个非常实用的 npm 包，可以用于快速添加等待提示效果。通过本文的介绍，你已经掌握了它的基本用法，希望可以帮助到你的前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106880