@itwonders-code/iw-loading-spinner 是一个前端加载动画的npm包，可用于在页面加载时显示一个自定义的加载动画。本文将详细介绍如何使用这个包，并提供基础的示例代码供读者参考。
安装
在使用该包前，请确保在本地安装了npm包管理器。如果您还没有安装npm，请访问 https://www.npmjs.com/package/npm-install 来安装。
从npm官方源安装:
npm install @itwonders-code/iw-loading-spinner --save
如何使用
安装完成后，我们需要导入样式，样式文件位于包中的 src/css/iw-spinners.css 目录下, 我们需要在页面中引入这个文件：
<link href="./node_modules/@itwonders-code/iw-loading-spinner/src/css/iw-spinners.css" rel="stylesheet">
在需要显示加载动画的位置，需要创建一个空的元素并指定一个id值。例如我们在 body 内创建一个 div 并赋予一个 id 值 spinner：
<body> ... <div id="spinner"></div> ... </body>
然后，我们将导入这个 npm 包并在需要显示加载动画的位置执行以下 JavaScript 代码：
-- -------------------- ---- ------- ------ - ------- - ---- ------------------------------------- ----- ------------- - ---------------------------------- -- -------------------- ----- ------- - --- --------- -- --------------- ------ ---------- -- ---- --------- ---- -- ---- --- ---------------------------- -- ---------
此时，页面上将会显示一个大小为100px、颜色为#5b5b5b的加载动画。
自定义样式
@itwonders-code/iw-loading-spinner 还支持添加自定义的样式。只需要定义一个类并继承 .iw-spinner 类，然后设置所需的属性即可。
在以下示例中，我们使用类 .my-spinner 来自定义加载动画。
定义CSS样式：
-- -------------------- ---- ------- ------------------- - -------- --- ------ ----- ------- ----- -------------- ---- ------- ----- --- ----------- -------------------- ------------ ---------- ---- -- -------- ------- - ---------- ---- - -- ----------- -------------- ---- ----------- ---------------- -
使用新创建的自定义样式：
<body> ... <div id="mySpinner"></div> ... </body>
import { Spinner } from '@itwonders-code/iw-loading-spinner';
const mySpinner = document.getElementById("mySpinner") // 根据ID获取需要显示加载数据的DOM元素
const spinner = new Spinner({
customClassName: 'my-spinner', // 设置用于自定义样式的类名
});
spinner.show(mySpinner); // 显示Spinner现在，我们已经完成了一个自定义自旋加载动画的效果，如下图所示：
自定义选项
@itwonders-code/iw-loading-spinner 提供了以下选项来自定义加载动画的属性。
| 选项 | 默认值 | 描述 |
|---|---|---|
color |
"#333333" |
设置加载动画的颜色 |
diameter |
150 |
设置加载动画的直径，以像素为单位 |
spinnerNumber |
SpinnerNumber.PACMAN |
设置加载动画类型的编号。 SpinnerNumber常量提供了预定义的类型。 |
customClassName |
null |
设置用于自定义样式的类名。如果没有提供，将使用默认样式。 |
您可以通过在创建 Spinner 实例时传递一个选项对象来自定义选项。例如：
-- -------------------- ---- ------- ------ - -------- ------------- - ---- ------------------------------------- ----- ------------- - ---------------------------------- -- -------------------- ----- ------- - --- --------- ------ ---------- -- ---- --------- --- -- ---- -------------- ------------------------------------ -- -- ------------- -- --- ---------------------------- -- ---------
总结
@itwonders-code/iw-loading-spinner 是一个实用的前端加载动画，可以让用户在等待页面加载时获得更好的用户体验。本教程介绍了如何从npm包管理器中安装，以及如何使用这个包来显示一个加载动画。此外，我们还演示了如何自定义样式和选项以实现更具个性化和特定的效果。
当然，您还可以根据自己的需求和创意进行更进一步的自定义开发。希望本文能够帮助您使用 @itwonders-code/iw-loading-spinner，提升页面用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442bb