详细信息
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,
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。