可定制的加载模式插件 - jQuery modal-loading

版本:

浏览量:1504

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

modal-loading 是一个 jQuery 插件，用于为 ajax/async 加载内容创建动画、高度可定制、模态样式的加载指示器。

主要特点：

支持两个方向。
自定义加载文本（标题和描述）。
有或没有背景覆盖。
支持自定义加载微调器。
有或没有显示/隐藏动画（基于 CSS3）。

如何使用它：

1. 将 jQuery 库和 jQuery 模式加载插件的文件插入网页。

<!-- Core stylesheet -->
<link rel="stylesheet" href="modal-loading.css">
 
<!-- CSS3 animations -->
<link rel="stylesheet" href="modal-loading-animate.css">

2. 在屏幕上显示默认加载模式。

var loading = new Loading();

3.使用以下设置自定义加载模式。

var loading = new Loading({
 
    // 'ver' or 'hor'
    direction: 'ver',
 
    // loading title
    title: undefined,
 
    // text color
    titleColor: '#FFF',
 
    // font size
    titleFontSize: 14,
 
    // extra class(es)
    titleClassName: undefined,
 
    // font family
    titleFontFamily:   undefined,
 
    // loading description
    discription: undefined,
 
    // text color
    discriptionColor:  '#FFF',
 
    // font size
    discriptionFontSize: 14,
 
    // extra class(es)
    discriptionClassName: undefined,
 
    // font family
    directionFontFamily: undefined,
 
    // width/height of loading indicator
    loadingWidth: 'auto',
    loadingHeight: 'auto',
 
    // padding in pixels
    loadingPadding: 20,
 
    // background color
    loadingBgColor: '#252525',
 
    // border radius in pixels
    loadingBorderRadius: 12,
 
    // loading position
    loadingPosition: 'fixed',
 
    // shows/hides background overlay
    mask: true,
 
    // background color
    maskBgColor: 'rgba(0, 0, 0, .6)',
 
    // extra class(es)
    maskClassName: undefined,
 
    // mask position
    maskPosition: 'fixed',
 
    // 'image': use a custom image
    loading<a href="https://www.jqueryscript.net/animation/">Animation</a>: 'origin',
 
    // path to loading spinner
    animationSrc: undefined,
 
    // width/height of loading spinner
    animationWidth: 40,
    animationHeight: 40,
    animationOriginWidth: 4,
    animationOriginHeight: 4,
 
    // color
    animationOriginColor: '#FFF',
 
    // extra class(es)
    animationClassName: undefined,
     
    // auto display
    defaultApply: true,
 
    // animation options
    animationIn: 'animated fadeIn',
    animationOut: 'animated fadeOut',
    animationDuration:  1000,
     
    // z-index property
    zIndex: 0,
     
});

联系我们