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

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

版本:

浏览量:59

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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,
     
});

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。