busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层，并显示loading效果。loader可以是字体图标，图片，文字等，非常灵活方便。
使用方法
在页面中引入jquery和busy-load相关文件。
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script><link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script> |
初始化插件
然后你就可以在需要的容器上调用loadingi效果了。
// 显示loading$("#some-element").busyLoad("show"); |
或者在调用时带上配置参数。
// 带配置参数$("#another-element").busyLoad("show", { background: "#000", spinner: "cube", animation: "slide"}); |
如果需要隐藏loading，只需要传入"hide"即可。
// 隐藏loading$("#some-element").busyLoad("hide"); |
// 带配置参数$("#another-element").busyLoad("hide", { animation: "fade"}); |
配置参数
buzy-load插件的默认配置参数如下：
exports.default = { spinner: "pump", // pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid 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"}; |
busy-load jquery loading遮罩层插件的github网址为：https://github.com/piccard21/busy-load
