html页面加载等待遮罩,jQuery带遮罩无限循环loading加载动画插件

这是一款效果非常炫酷的jQuery带遮罩无限循环loading加载动画插件。通过该loading加载动画插件，你可以为任何元素通过切换class的方式来显示进度条，并且可以带有遮罩效果。遮罩效果是通过CSS来完成的。

HTML结构

使用不带遮罩效果的loading加载动画的html结构如下：

使用带遮罩效果的loading加载动画的html结构如下：

loading

JAVASCRIPT

在页面中引入jQuery和loading-overlay.min.js文件，然后可以按下面方法调用插件：

jQuery(function($) {

// Calling the plugin

// (prepends a div.loading to the target element)

$('#target').loadingOverlay();

// Removing the loading overlay

$('#target').loadingOverlay('remove');

});

CSS样式

该loading加载动画插件需要配合以下的CSS样式：

@font-face {

font-family: "demo";

src: url('fonts/icons.woff') format("woff"), url('fonts/icons.ttf') format("truetype");

}

@keyframes loadingStart {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes loading {

0% {

transform: rotate(0deg);

}

50% {

transform: rotate(180deg);

}

100% {

transform: rotate(360deg);

}

}

.loading {

position: relative;

pointer-events: none;

}

#css-input:checked ~ .loading .loading-overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

-webkit-animation: loadingStart 3s 300ms linear 1 both;

-moz-animation: loadingStart 3s 300ms linear 1 both;

-o-animation: loadingStart 3s 300ms linear 1 both;

animation: loadingStart 3s 300ms linear 1 both;

background: rgba(255, 255, 255, 0.5);

text-align: center;

}

#css-input:checked ~ .loading .loading-text {

font-size: 0.875rem;

line-height: 1.3125rem;

text-shadow: white 0 0 1em, white 0 0 0.5em, white 0 0 0.25em;

position: relative;

display: block;

text-transform: uppercase;

font-weight: bold;

}

#css-input:checked ~ .loading .loading-text:after {

content: "...";

}

#css-input:checked ~ .loading .loading-spinner {

position: absolute;

top: 50%;

bottom: 0;

left: 0;

right: 0;

margin: -3.9375rem auto 0;

color: #1a1d1d;

text-align: center;

}

#css-input:checked ~ .loading .loading-icon {

font-size: 4.8125rem;

line-height: 5.25rem;

text-shadow: rgba(255, 255, 255, 0.75) 0 0 0.5em;

-webkit-animation: loading 1s steps(4) infinite;

-moz-animation: loading 1s steps(4) infinite;

-o-animation: loading 1s steps(4) infinite;

animation: loading 1s steps(4) infinite;

display: block;

vertical-align: middle;

}

#css-input:checked ~ .loading .loading-icon:before {

vertical-align: middle;

content: "\e000";

font-family: "demo";

}

可用参数

下面是一些可用参数，不填写则使用这些为默认参数：

$('#target').loadingOverlay({

loadingClass: 'loading', // Class added to `target` while loading

overlayClass: 'loading-overlay', // Class added to loading overlay (to be styled in CSS)

spinnerClass: 'loading-spinner', // Class added to loading overlay spinner

iconClass: 'loading-icon', // Class added to loading overlay spinner

textClass: 'loading-text', // Class added to loading overlay spinner

loadingText: 'loading' // Text within loading overlay

});

注意：如果在初始化时设置了 loadingClass 和 overlayClass的值来加载遮罩效果，那么在在removing的时候必须写上相同的值：

$('#target').loadingOverlay('remove', {

loadingClass: 'loading',

overlayClass: 'loading-overlay'

});