高度可定制的 jQuery 加载掩码插件 - busy-load

版本:

浏览量:1197

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

busy-load 是一个高度可定制的 jQuery 加载指示器插件，它在特定元素（或整个页面）上显示动画加载覆盖，带有自定义文本、图像或基于 Font Awesome 的加载微调器。

也可以看看：

10 个最佳加载 Spinner 和 Indicator jQuery 插件
10 个最佳加载 Spinner/Indicator JavaScript 和 CSS 库
80 多个面向前端开发人员的最佳纯 CSS 加载微调器

安装：

# NPM
$ npm install busy-load --save

如何使用它：

1. 在网页上包含 jQuery 忙加载插件的文件。

<link href="dist/app.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/app.min.js"></script>

2. 如果您想在加载微调器中使用 Font Awesome 图标，请包含 Font Awesome Iconic Font。

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. 显示和隐藏覆盖整个页面的加载指示器。

// show
$.busyLoadFull("show", {
  // options here
});
 
// hide
$.busyLoadFull("hide", {
  // options here
});

4. 显示和隐藏覆盖特定容器的装载指示器。

// show
$("#box").busyLoad("show", {
  // options here
});
 
// hide
$("#box").busyLoad("hide", {
  // options here
});

5. 使用以下选项自定义加载指示器。

{
  spinner: "pump", // pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-<a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>
  image: false,
  fontawesome: false, // "fa fa-refresh fa-spin fa-2x fa-fw"
  custom: false, // jQuery Object
  color: "#fff",
  background: "rgba(0, 0, 0, 0.21)",
  maxSize: "50px", // Integer/String only for spinners & images, not fontawesome & custom
  minSize: "20px", // Integer/String only for spinners & images, not fontawesome & custom
  text: false,
  textColor: false, // default is color
  textMargin: ".5rem",
  textPosition: "right", // left, right, top, bottom 
  fontSize: "1rem",
  fullScreen: false,
  animation: false, // fade, slide
  animationDuration: "fast",  // String, Integer
  containerClass: "busy-load-container",
  containerItemClass: "busy-load-container-item",
  spinnerClass: "busy-load-spinner",
  textClass: "busy-load-text", 
};

6. 事件处理程序...

$(document).on('bl.show', function (event, $container, $targetNode) {
  // on show
});
 
$(document).on('bl.shown', function (event, $container, $targetNode) {
  // after shown
});
 
$(document).on('bl.hide', function (event, $container, $targetNode) {
  // on hide
});
 
$(document).on('bl.hidden', function (event, $container, $targetNode) {
  // after hidden
});