web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
jQuery带遮罩无限循环loading加载动画插件
分类:
进度条
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
使用不带遮罩效果的loading加载动画的html结构如下: ```html
``` 使用带遮罩效果的loading加载动画的html结构如下: ```html
loading
``` ##### JAVASCRIPT 在页面中引入jQuery和loading-overlay.min.js文件,然后可以按下面方法调用插件: ```html ``` ##### 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' }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告