.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. CF445

    题解: xjb乱判断一下就可以了 代码: #include<bits/stdc++.h> using namespace std; typedef long long ll; int n, ...

  2. UML_04_时序图

    一.前言 时序图建模工具,推荐一个工具 https://www.zenuml.com/ 时序图是一种强调消息时序的交互图,他由对象(Object).消息(Message).生命线(Lifeline) ...

  3. 在CentOS7 安装ffmpeg

    参考自:https://linuxize.com/post/how-to-install-ffmpeg-on-centos-7/ 首先切换至root用户 yum install epel-releas ...

  4. Premake 生成 Makefile 的缺省配置

    Premake 生成 Makefile 的缺省配置(金庆的专栏 2017.7)premake5.exe --os=linux gmake生成的 Makefile 中有个 config, 用 make ...

  5. Android版本的"Wannacry"文件加密病毒样本分析(附带锁机)

    一.前言 之前一个Wannacry病毒样本在PC端肆意了很久,就是RSA加密文件,勒索钱财.不给钱就删除.但是现在移动设备如此之多,就有一些不法分子想把这个病毒扩散到移动设备了,这几天一个哥们给了一个 ...

  6. anjular2以及微信小程序的一点比较

    1条件渲染: 小程序:用 wx:if="{{condition}}" 来判断是否需要渲染该代码块. <view wx:if="{{condition}}" ...

  7. fedora 27

    安装 U盘安装,感谢学长的U盘 配置 安装外来软件的时候,需要输入root密码 软件 软件安装是个麻烦事儿啊 详情 [新手指南: 在 Ubuntu 和 Fedora 上安装软件包] Fedora 中文 ...

  8. 一次Mysql连接池卡死导致服务无响应问题分析(.Net Mysql.Data 6.9.9)

    问题: 进程启动后,线程数迅速上升至最小线程数后,缓慢上升(线程池限制)到数千,然后由于线程过多,CPU飙升到90%. 对外表现为Api无响应或连接超时. 背景 有些数据存在于另一个机房,通过内网专线 ...

  9. Spring读取配置文件,获取bean的几种方式

    BeanFactory有很多实现类,通常使用 org.springframework.beans.factory.xml.XmlBeanFactory类.但对于大部分J2EE应用而言,推荐使 用App ...

  10. bzoj 4573 大森林

    bzoj 4573 大森林 由于树上路径是唯一的,查询合法的两个点间路径长度显然与其他加点操作无关,所以可以离线处理,将所有的查询放在加点后. 这样我们可以对每棵树都在上颗树的基础上处理好形态后,处理 ...