1. 简介
bootstrap-waitingfor 是一个基于 Bootstrap 样式的等待提示组件，可以方便地在前端页面中使用。它支持多种类型的等待提示，包括旋转图标、进度条、文字提示等。
2. 安装
首先，需要通过 npm 安装这个包：
npm install bootstrap-waitingfor --save
然后，在需要使用的文件中引入 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/bootstrap-waitingfor/waiting.css"> <script src="node_modules/bootstrap-waitingfor/waiting.js"></script>
3. 使用
3.1 基本用法
为了使用等待提示，我们需要给一个 HTML 元素添加 waiting 类，并调用 $.waitingFor() 方法：
-- -------------------- ---- -------
------- ---------- ----------- --------------------
--------
------------ -
------------------------------ -
---------------------
-- ---------
---
---
---------上面的代码会在按钮被点击时显示等待提示，然后执行异步操作。操作完成后，等待提示会自动隐藏。
3.2 自定义设置
bootstrap-waitingfor 提供了一些选项，可以进行自定义设置。例如，你可以修改文本提示和旋转图标的颜色：
$.fn.waitingFor.defaults.text = "正在提交..."; $.fn.waitingFor.defaults.spinner.color = "#00ff00";
你可以在调用 $.waitingFor() 方法时传递选项，来进行临时设置：
$(this).waitingFor({
text: "正在提交...",
spinner: {
color: "#00ff00"
}
});3.3 进度条提示
除了默认的等待提示外，bootstrap-waitingfor 还支持进度条提示。你可以使用 progress 类，并设置 data-waiting-progress 属性来指定进度百分比：
<button class="btn btn-primary waiting progress" data-waiting-progress="50%">提交</button>
4. 结语
通过本文，我们学习了如何使用 npm 包 bootstrap-waitingfor 来实现前端页面中的等待提示。同时，也了解了自定义设置和进度条提示的用法。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38379