.loading{

width:160px;

height:56px;

position: absolute;

top:50%;

left:50%;

line-height:56px;

color:#fff;

padding-left:60px;

font-size:15px;

background: #000 url(images/loader.gif) no-repeat 10px 50%;

opacity: 0.7;

z-index:9999;

-moz-border-radius:20px;

-webkit-border-radius:20px;

border-radius:20px;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

<div id="loading" class="loading">Loading pages...</div>

//遮罩层,

.loading{

    position: fixed;

    top: 0px;

    left: 0px;

    right:0px;

    bottom:0px;

    background-color: #8FB0D1;

    -moz-opacity: 0.5;

    opacity:0.5;

    z-index:1001;

    filter: alpha(opacity=40);
padding-top: 20%;
}

css loading 效果的更多相关文章

  1. 自定义ajax,添加loading效果

    自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...

  2. 使用CSS时间打点的Loading效果的教程

    基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...

  3. 前端页面loading效果(CSS实现)

    当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...

  4. CSS content换行技术实现字符animation loading效果

    一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...

  5. 纯CSS仿windows系统loading效果

    今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...

  6. 网页Loading效果

    问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...

  7. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  8. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  9. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

随机推荐

  1. Windows消息队列(优先队列,结构体中放比较函数)

    Windows消息队列 消息队列是Windows系统的基础.对于每个进程,系统维护一个消息队列.如果在进程中有特定事件发生,如点击鼠标.文字改变等,系统将把这个消息加到队列当中.同时,如果队列不是空的 ...

  2. LeetCode OJ:Rotate List(旋转链表)

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  3. Appium测试Webview

    通常情况下我们都是通过Android自带的tools下的UI automator viewer来获取控件或元素的xpath.class.id等来直接进行定位 如下面的“用户登录”按钮: 但是有一些并不 ...

  4. Shell学习笔记——算数运算与条件测试

    算数运算 1. 使用let命令 #!/sbin/bash var1=2 var2=3 let sum=var1+var2 echo $sum 使用let命令式,变量前不需要加$号 只用于整数运算,不适 ...

  5. about system (pause) in cpp

    Which is best way to pause the console in C++ programs? using cin.get() or using system("pause& ...

  6. React-Native进阶_4.底部标签栏TabBar

    原生项目中,我们对底部Tab 很熟悉,点击Tab标签可以切换页面,那么在React-Native 中我们该怎么实现呢. 在查了文档后,我们找到了一个TabBarIos ,这个是ios 下使用的Tab ...

  7. vuex(二)getters

    getters: 有时候,我们需要对state的数据进行筛选,过滤.这些操作都是在组件的计算属性进行的.如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数:或者将其提取到一个公共的 ...

  8. vps上搭建jupyter notebook远程服务

    安装anaconda 使用如下命令下载: wget https://repo.continuum.io/archive/Anaconda3-5.0.0.1-Linux-x86_64.sh 如果非roo ...

  9. HP G7服务器添加新硬盘

    1. 停掉 服务器(必须停了服务器),插入新硬盘.开机,出现F9和F11的时候,按下F5(这个很坑爹,没有显示F5进入阵列配置),进入阵列控制界面之后按出现红色的提示后按下F8进入阵列控制管理界面.进 ...

  10. 菜鸟夜谈android反编译

    工具: apktool:https://code.google.com/p/android-apktool/ dex2jar: https://code.google.com/p/dex2jar/ j ...