当前位置：首页 > 网页特效 > 进度条

jquery loading遮罩层插件

分类：进度条日期：2024-05-14 点击(0) 评论(0)

jquery loading遮罩层插件

简介

##### 使用方法
在页面中引入jquery和busy-load相关文件。

```html
<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效果了。

```html
// 显示loading
$("#some-element").busyLoad("show");
```
或者在调用时带上配置参数。

```html
// 带配置参数
$("#another-element").busyLoad("show", {
  background: "#000",
  spinner: "cube",
  animation: "slide"
});
```
如果需要隐藏loading，只需要传入"hide"即可。

```html
// 隐藏loading
$("#some-element").busyLoad("hide");

// 带配置参数
$("#another-element").busyLoad("hide", {
  animation: "fade"
});```
#####  配置参数
buzy-load插件的默认配置参数如下：

```html
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"
};         
```

web299.com

jquery loading遮罩层插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果