在前端开发中，使用加载效果可以增强用户体验。今天我要介绍一个 npm 包 bz-bottom-loader，它可以在页面底部显示一个加载器，让用户知道页面正在加载中。本文将详细介绍如何使用 bz-bottom-loader，包括安装、使用方式、参数设置等。
安装
在命令行工具中使用以下命令进行安装：
npm install bz-bottom-loader
使用方式
在需要显示加载器的页面中，先在头部引入 css 文件：
<link rel="stylesheet" href="../node_modules/bz-bottom-loader/dist/style.css" />
然后在文档底部添加以下代码，用于初始化加载器：
<div class="bz-bottom-loader"></div>
最后，在需要使用加载器的时候，调用以下方法：
var loader = new BzBottomLoader(); loader.show();
参数设置
您也可以设置以下参数来自定义加载器的样式和行为：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| wrapperClass | String | '' | 自定义加载器的容器的 class 名（默认为 "bz-bottom-loader"） |
| spinnerClass | String | '' | 自定义 spinner 的 class 名 |
| messageClass | String | '' | 自定义加载信息的 class 名 |
| message | String | 'Loading' | 加载信息 |
| spinnerColor | String | '#000' | 自定义 spinner 的颜色 |
| spinnerSize | Number | 60 | 自定义 spinner 的大小 |
| spinnerPadding | Number | 20 | 自定义 spinner 距离容器边缘的 padding |
| zIndex | Number | 999 | 加载器的 z-index 值 |
| fadeInDuration | Number | 300 | 加载器淡入效果的时间（ms） |
| fadeOutDuration | Number | 300 | 加载器淡出效果的时间（ms） |
下面是一个自定义样式的例子：
-- -------------------- ---- -------
--- ------ - --- ----------------
-------- ----------
------------- ----------
------------ ---
--------------- ---
------------- ----------------
------------- -----------------
---
--------------总结
通过本文，我们学习了如何使用 npm 包 bz-bottom-loader 实现页面加载效果，同时了解了如何根据自身需求自定义加载器的样式和行为。在实际项目中，合理使用加载效果可以给用户更好的体验，希望本文能对您有所帮助。以下是完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -- ---------------- --------------
----- ---------------- ------------------------------------------------------ --
-------
------
-------- ----------
--------- ----------
------- -------------------------------------------------------------------------
--------
--- ------ - --- -----------------
--------------
------------------- -- -
--------------
-- ------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8fccdc64669dde5730