当前位置：首页 > 网页特效 > 进度条

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

分类：进度条日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<div id="target"></div> 
```
使用带遮罩效果的loading加载动画的html结构如下：

```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文件，然后可以按下面方法调用插件：

```html
<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样式：

```html
@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";
}
```
##### 可用参数
下面是一些可用参数，不填写则使用这些为默认参数：

```html
$('#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的时候必须写上相同的值：

```html
$('#target').loadingOverlay('remove', {
    loadingClass: 'loading',
    overlayClass: 'loading-overlay'
});
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果