jQuery带遮罩无限循环loading加载动画插件

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

HTML结构

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

<div id="target"></div> 
                

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

<div id="target" class="loading">
  <div class="loading-overlay">
    <p class="loading-spinner">
      <span class="loading-icon"></span>
      <span class="loading-text">loading</span>
    </p>
  </div>
</div>
                

JAVASCRIPT

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

<script src="jquery.js"></script>
<script src="js/loading-overlay.min.js"></script>
<script>
jQuery(function($) {
    // Calling the plugin
    // (prepends a div.loading to the target element)
    $('#target').loadingOverlay();

    // Removing the loading overlay
    $('#target').loadingOverlay('remove');
});
</script>
                

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