这是一款效果非常炫酷的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' });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!