在前端开发中，我们经常需要给页面增加各种加载状态，为了让页面更友好、更优秀，我们可以使用npm包nuke-biz-custom-loading。该插件提供了一些自定义的加载效果，可以帮助我们更好地控制页面加载状态。
安装
安装npm包有以下两种方式：
通过npm安装
npm install nuke-biz-custom-loading --save
通过yarn安装
yarn add nuke-biz-custom-loading
引入
通过ES6模块引入
import NukeBizCustomLoading from 'nuke-biz-custom-loading';
通过CommonJS模块引入
const NukeBizCustomLoading = require('nuke-biz-custom-loading');直接引入js文件
在HTML中直接引入dist/NukeBizCustomLoading.min.js即可：
<script type="text/javascript" src="dist/NukeBizCustomLoading.min.js"></script>
使用
初始化
const loading = new NukeBizCustomLoading({
selector: '#loading', // 容器选择器
bgColor: '#f5f5f5', // 背景色
spinnerColor: '#5D5B5B', // 图标颜色
spinnerSize: 'large', // 图标大小
text: '正在加载...', // 文字
textColor: '#5D5B5B', // 文字颜色
});显示loading
loading.show();
隐藏loading
loading.hide();
示例
<!-- HTML代码 --> <div id="loading"></div> <button id="btn">点击加载</button>
-- -------------------- ---- -------
-- ----
------ -------------------- ---- --------------------------
----- ------- - --- ----------------------
--------- -----------
-------- ----------
------------- ----------
------------ --------
----- ----------
---------- ----------
---
----- --- - -------------------------------
----------------------------- ----- -- -- -
--- -
---------------
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
------------------
- ----- ----- -
-------------------
- ------- -
---------------
-
---总结
npm包nuke-biz-custom-loading提供了一些可定制的加载图标效果，使用简单、方便。通过对该插件的学习，我们可以更好地控制页面加载状态，提升用户体验，相信对我们前端开发来说一定是很有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f923d1de16d83a66b65