css loading 效果
.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 效果的更多相关文章
- 自定义ajax,添加loading效果
自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...
- 使用CSS时间打点的Loading效果的教程
基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...
- 前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
- 纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...
- 网页Loading效果
问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
随机推荐
- LINUX中的DNS服务---DNS集群
一.DNS集群的理解 在使用DNS的时候,为了缓解服务器的压力,会使用多个辅助DNS服务器来分担主DNS的工作.这些DNS就叫做DNS集群. 二.配置过程 1)在辅DNS中操作如下:(主机号为172. ...
- 慕课网-Linux达人养成计划学习笔记
mkdir -p [目录]创建目录-p 递归创建ls 查看当前目录下的文件和目录等其他文件 cd [目录]命令英文愿意:change directory切换所在目录简化操作cd ~ 进入当前用户的家目 ...
- Sqlserver 存储过程 返回-6
存储过程中没有返回 手动返回-6的代码,但是一直接收到-6返回值. 经最后研究发现,是粗心导致的,Insert插入数据时在非空字段插入了Null值导致出现异常,所以返回了-6. 所以说在事务中,可能会 ...
- Linux网络编程IPv4和IPv6的inet_addr、inet_aton、inet_pton等函数小结
知识背景: 210.25.132.181属于IP地址的ASCII表示法,也就是字符串形式.英语叫做IPv4 numbers-and-dots notation. 如果把210.25.132.181转换 ...
- Java并发编程之读写锁
读写锁维护了一对相关的锁,一个用于只读操作,一个用于写入操作.只要没有writer,读取锁可以由多个reader线程同时保持.写入锁是独占的. 可重入读写锁 ReentrantReadWriteLoc ...
- 轻量级网络 - PVANet & SuffleNet
一. PVANet 论文:PVANET: Deep but Lightweight Neural Networks for Real-time Object Detection [点击下载] C ...
- Python自定义大小截屏
蝈蝈这两天正忙着收拾家当去公司报道,结果做PHP的发小蛐蛐找到了他,说是想要一个可以截图工具. 大致需要做出这样的效果. 虽然已经很久不写Python代码了,但是没办法,盛情难却啊,只好硬着头皮上了. ...
- UICollectionView 数据库元素分组 多种section分开显示
第一遍 复杂方法 : 数据库查询一个表中userID 然后进行分类 中间去重 获得ID个数 放到section 中 显示 #pragma mark - 查询不同的ID 各数 - (void)c ...
- 如何预编译ASP.Net程序
打开Developer Command Prompt,执行命令 aspnet_compiler -v \Target -p 源文件夹地址 -f 目标文件夹地址
- Postfix邮件黑名单和白名单
本文主要介绍如何用Postfix添加域名黑名单和白名单,用以处理垃圾邮件. 1.修改postfix主配置文件,增加限制语句 vim /etc/postfix/main.cf # 文末添加一行,限制往本 ...