在前端开发中，我们经常需要为用户展示加载中的提示动画，而 spinning-preloader 就是其中一个很实用的 npm 包。它可以方便地为网页添加多种加载中的预备动画，简单易用，用起来十分方便。
安装
你可以通过 npm 安装 spinning-preloader，命令如下：
--- ------- ------------------
如果你使用的是 yarn，可以使用以下命令安装：
---- --- ------------------
安装完成后，你就可以在你的项目中使用该包提供的组件了。
用法
使用 spinning-preloader 很简单。首先，在你的项目的入口文件中引入 spinning-preloader：
------ --------- ---- --------------------
使用的时候，只需要调用该包提供的方法即可：
------------------
这个方法会在页面中创建一个加载中的动画，等到你的数据加载完成后再停止这个动画。
为了达到最佳的用户体验，我们需要尽可能早地调用 preloader.start() 方法，以便在渲染页面之前就开始加载动画。这样可以避免用户需要等待过长的时间。
在数据加载完成后，记得调用下面的方法停止动画：
-----------------
这个方法会自动销毁动画，并移除页面中创建的所有 HTML 元素。
配置选项
你可以通过传递一个配置对象来定制加载动画。
------ --------- ---- -------------------- ----------------- ----- ------- ---------------- ------ ------------- ------- ------------- -- -------------- --- -------------- --- --------- ---- ------- ------ ---
type
用来指定预备动画的类型，可以选用 circle，box，line，bouncing，squares，wandering-cubes 等多种类型。
backgroundColor
用来改变预备动画的背景颜色，可以传入一个合法的 CSS 颜色值。
spinnerColor
用来改变预备动画中旋转图案的颜色，也可以传入一个合法的 CSS 颜色值。
spinnerWidth
用来指定旋转图案的宽度。
spinnerRadius
用来指定旋转图案的半径。
spinnerHeight
用来指定旋转图案的高度。
fadeTime
用来控制动画的渐隐时间。
zIndex
用来指定预备动画的 z-index 值。默认情况下，预备动画的 z-index 值是 9999。
示例代码
以下是一个使用 spinning-preloader 的完整示例代码：
--------- -----
------
------
----- ----------------
--------- ------------------ ---------
-------
------
------- ----------------------------------
------- -------------------------
-------
------------- --------- ---- ---------------------
-------- ---------- -
-----------------
----- ---------
---------------- -------- -- -- ------
------------- --------
------------- --
-------------- ---
-------------- ---
---
------------- -- -
-----------------
-----------------
-- ------
-在这个示例中，我们添加了一个按钮，当用户点击该按钮时，我们会调用 loadData 方法来模拟数据的加载过程。
在 loadData 方法中，我们首先调用了 preloader.start 方法来创建一个加载中的动画。在这个方法中，我们选用了 circle 类型的动画，将背景颜色设置为带有 70% 不透明度的黑色，将旋转图案的颜色设置为白色，设置了宽度、半径和高度。
2 秒钟之后，我们会调用 preloader.stop() 方法，停止加载动画，并提示用户数据已经加载完成。
结果展示：
总结
spinning-preloader 是一款非常方便的 npm 包，在前端项目开发中，为用户展示动画是一个很实用的功能。这个包提供了多种类型的预备动画和不同的配置选项，可以快速方便地为项目添加加载中的提示动画。希望这篇教程对你有所帮助，祝你的项目开发顺利！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006709c8ccae46eb111efae