当前位置:JS特效 » 其他 » jquery loading遮罩层插件
 jquery loading遮罩层插件
如果您觉得内容不错,请分享:

插件介绍

busy-load是一款灵活的jqueryloading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:47
简要教程

busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。

使用方法

在页面中引入jquery和busy-load相关文件。




                
初始化插件

然后你就可以在需要的容器上调用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

Top