给web请求加遮罩动画

效果预览：

css:

/*#fountainG{position:relative;margin:10% auto;width:240px;height:29px
}*/
#fountainG{position:relative;filter:Alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1200;position:fixed;left:0;top:0;right:0;bottom:0;display:none;overflow:hidden;
}.fountainG{position:absolute;top:45%;margin-left: 45%;background-color:#33cc99;width:29px;height:29px;-webkit-animation:bounce_fountainG 1.3s infinite normal;-moz-animation:bounce_fountainG 1.3s infinite normal;-o-animation:bounce_fountainG 1.3s infinite normal;-ms-animation:bounce_fountainG 1.3s infinite normal;animation:bounce_fountainG 1.3s infinite normal;-moz-transform:scale(.3);-webkit-transform:scale(.3);-ms-transform:scale(.3);-o-transform:scale(.3);transform:scale(.3);border-radius:19px;
}#fountainG_1{left:0;-moz-animation-delay:0.52s;-webkit-animation-delay:0.52s;-ms-animation-delay:0.52s;-o-animation-delay:0.52s;animation-delay:0.52s;
}#fountainG_2{left:30px;-moz-animation-delay:0.65s;-webkit-animation-delay:0.65s;-ms-animation-delay:0.65s;-o-animation-delay:0.65s;animation-delay:0.65s;
}#fountainG_3{left:60px;-moz-animation-delay:0.78s;-webkit-animation-delay:0.78s;-ms-animation-delay:0.78s;-o-animation-delay:0.78s;animation-delay:0.78s;
}#fountainG_4{left:90px;-moz-animation-delay:0.91s;-webkit-animation-delay:0.91s;-ms-animation-delay:0.91s;-o-animation-delay:0.91s;animation-delay:0.91s;
}#fountainG_5{left:120px;-moz-animation-delay:1.04s;-webkit-animation-delay:1.04s;-ms-animation-delay:1.04s;-o-animation-delay:1.04s;animation-delay:1.04s;
}#fountainG_6{left:150px;-moz-animation-delay:1.17s;-webkit-animation-delay:1.17s;-ms-animation-delay:1.17s;-o-animation-delay:1.17s;animation-delay:1.17s;
}#fountainG_7{left:180px;-moz-animation-delay:1.3s;-webkit-animation-delay:1.3s;-ms-animation-delay:1.3s;-o-animation-delay:1.3s;animation-delay:1.3s;
}#fountainG_8{left:210px;-moz-animation-delay:1.43s;-webkit-animation-delay:1.43s;-ms-animation-delay:1.43s;-o-animation-delay:1.43s;animation-delay:1.43s;
}@-moz-keyframes bounce_fountainG{0%{-moz-transform:scale(1);background-color:#33cc99;}100%{-moz-transform:scale(.3);background-color:#0099cc;}}@-webkit-keyframes bounce_fountainG{0%{-webkit-transform:scale(1);background-color:#33cc99;}100%{-webkit-transform:scale(.3);background-color:#0099cc;}}@-ms-keyframes bounce_fountainG{0%{-ms-transform:scale(1);background-color:#33cc99;}100%{-ms-transform:scale(.3);background-color:#0099cc;}}@-o-keyframes bounce_fountainG{0%{-o-transform:scale(1);background-color:#33cc99;}100%{-o-transform:scale(.3);background-color:#0099cc;}}@keyframes bounce_fountainG{0%{transform:scale(1);background-color:#33cc99;}100%{transform:scale(.3);background-color:#0099cc;}}

View Code

html:

 <div id="fountainG"><div id="fountainG_1" class="fountainG"></div><div id="fountainG_2" class="fountainG"></div><div id="fountainG_3" class="fountainG"></div><div id="fountainG_4" class="fountainG"></div><div id="fountainG_5" class="fountainG"></div><div id="fountainG_6" class="fountainG"></div><div id="fountainG_7" class="fountainG"></div><div id="fountainG_8" class="fountainG"></div></div>

js:

//加载动画效果function showLoad(){    $('#fountainG').show();}//隐藏动画效果function hiddenLoad(){    $('#fountainG').hide();}


function resultAjax(url, data) {var result;$.ajax({url:   $.contextPath() + url,type: 'get',async: true,  //注意这里cache: false,contentType: 'application/json',data: data,dataType: 'json',beforeSend: function (){//ajax刷新前加载load动画
            showLoad();},success: function(data) {//TODO
        },error: function(data) {commonAlert('出现了一点小问题','error');},complete:function () {//完成以后隐藏load动画
        hiddenLoad();}});return result;
}

转载于:https://www.cnblogs.com/UncleWang001/p/10648634.html

给web请求加遮罩动画相关推荐

Web 页面加载动画
Web 页面加载动画在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...
uniapp 点击动画_uni-app自定义加载动画组件
先写好一个加载动画组件,如: main.js 中添加相应引用,使用Vuex来记录显示状态,所以Vuex也需要引用 //Vuex import store from './store' Vue.prot ...
WPF添加加载动画遮罩
项目中用到不少后台数据请求需要前端等待,添加加载动画改善用户体验一.动画界面制作添加一个自定义控件 <ResourceDictionaryxmlns="http://schemas ...
vue ajax加载动画,vue 请求加载数据的时候如何显示加载动画
提醒一下:建议把ajax的请求,拆分成一个独立的sdk,避免多处重复代码. that.loading(false);应该写到ajax执行结束后. var lhcmDetail=new Vue({ el ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
Android 页面或文件或网络请求时的加载动画
//加载图片或页面或网络请求时出现加载动画 public Class LoadingAnimation{ private static LoadingAnimation loadingAnimatio ...
web loding 自定义加载动画插件
官网指南介绍 Web 中实现 loading 的方式有很多种,例如使用css动画.js操作元素.gif图片.svg动画.ui框架中自带loading等等,各有所优,操作元素可能更方便,但会影响性能 ...
Vue在请求(axios)里面实现loading加载动画
1.在main.js里引入axios import axios from "@/http/index.js" 2.在vuex中设置状态 state: {isLoading: fal ...
Android为网络请求自定义加载动画
android自带的加载动画都不怎么好看,在这里介绍一种自定义加载动画的方法原始图片: 编写动画progressbar.xml, <?xml version="1.0" e ...

给web请求加遮罩动画

给web请求加遮罩动画相关推荐

最新文章

热门文章