效果预览:

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:;
position:fixed;
left:;
top:;
right:;
bottom:;
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:;
-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;
} }

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

给web请求加遮罩动画的更多相关文章

  1. 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

    1.通过Query  post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...

  2. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  3. 加载动画插件spin.js的使用随笔

    背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似  的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...

  4. web页面加载速度缓慢,如何优化?

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  5. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  6. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  7. Web请求响应简单整理

      简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正. 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网 ...

  8. JAVA Web.xml 加载顺序

    web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...

  9. Java web.xml加载顺序

     web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点:   <listener></listener&g ...

随机推荐

  1. Cocos Creator LabelAtlas(艺术数字的使用)

    # 艺术数字资源 (LabelAtlas) **艺术数字资源** 是一种用户自定义的资源,它可以用来配置艺术数字字体的属性. ## 创建艺术数字资源 在 **资源管理器** 中右键,可以在如下菜单中找 ...

  2. The world is in my hands

    Null项 其实我还是比较希望你能理解我的心情 无聊666回味

  3. git stash pop 冲突,git stash list 中的记录不会自动删除的解决方法

    在使用git stash代码时,经常会碰到有冲突的情况,一旦出现冲突的话,系统会认为你的stash没有结束. 导致的结果是git stash list 中的列表依然存在,实际上代码已经pop出来了. ...

  4. eclipse导出maven工程的可执行jar包

    一.eclipse导出maven工程的可执行jar包 建立两个maven工程 ZKServer 和ZKClient 注意:用maven进行开发管理的话,默认的打出来的jar包是不能运行的,需要在pom ...

  5. 信步漫谈之Git—环境搭建及入门

    一.初识Git Git是一套优秀的分布式版本控制系统(区别于SVN和CVS,这两者是集中式版本控制系统).分布式和集中式版本控制系统的区别:1)集中式版本控制系统:版本库是集中存放在中央服务器的,而干 ...

  6. C#导出文本内容到word文档源码

    将做工程过程中较好的代码片段珍藏起来,下面的代码内容是关于C#导出文本内容到word文档的代码,希望能对小伙伴们也有好处.<%@ Page Language="C#" Aut ...

  7. postgresql 自定义函数

    CREATE OR REPLACE FUNCTION "public"."pm25_aqi"("pm25_nd" numeric) RETU ...

  8. json传实体到后台接受

    转自https://www.cnblogs.com/threadj/p/10535760.html 我用第一种是没问题的,第二种还不行,再研究一下 1.json参数为json字符串 var data ...

  9. docker tmpfs 的测试结果

    创建 2G 内存的 Container 使用tmpfs挂载到 /tmp docker run --rm -it --memory 2g --mount type=tmpfs,destination=/ ...

  10. 安卓GreenDao(基础)

    GreenDao的基础使用很简单,网上一大筐,推荐在简书里面搜索,那么我这里要说些什么呢,试想,这些简单的Demo可以带你了解GreenDao,但你能用这些代码做公司的项目么,肯定不行,所以我结合自身 ...