.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. 快速切题 poj 3026 Borg Maze 最小生成树+bfs prim算法 难度:0

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8905   Accepted: 2969 Descrip ...

  2. 二十二、utl_inaddr(用于取得局域网或Internet环境中的主机名和IP地址)

    1.概述 作用:用于取得局域网或Internet环境中的主机名和IP地址. 2.包的组成 1).get_host_name作用:用于取得指定IP地址所对应的主机名语法:utl_inaddr.get_h ...

  3. Markdown_04_折叠语法

    目录 一.折叠语法 参考资料 一.折叠语法 主要使用的是 html5的 details标签 (1)示例如下: <details> <summary>折叠文本</summa ...

  4. Systems

    package com.System; public class Study01 { /* * System 包含一些游泳的类字段和方法 * 继承自java.lang包 * JDK1.0开始 * 全部 ...

  5. 剑指offer--49.矩阵中的路径

    时间限制:1秒 空间限制:32768K 热度指数:156998 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩 ...

  6. Python中基本的读文件和简单数据处理

    Python中基本的读文件和简单数据处理 暂无评论 DataQuest上面的免费课程(本文是Python基础课程部分),里面有些很基础的东西(csv文件读,字符串预处理等),发在这里做记录.涉及下面六 ...

  7. python函数作用域

    python中函数作用域 在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = '肖亚飞' print('在change_ ...

  8. python中处理命令行参数的模块optpars

    optpars是python中用来处理命令行参数的模块,可以自动生成程序的帮助信息,功能强大,易于使用,可以方便的生成标准的,符合Unix/Posix 规范的命令行说明.使用 add_option() ...

  9. 【剑指offer】滑动窗口的最大值,C++实现

    原创博文,转载请注明出处! # 题目 # 思路 利用C++中的双端队列保存有可能是滑动窗口最大值的下标,其中队首元素保存当前窗口最大值的下标.当滑动窗口改变时,更新队列.队列更新的规则:(1)新元素依 ...

  10. 微信网页登录Tips

    http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 以这篇文章为例,一般都是用户在第三方app中登录时,由第三方去申请资源服务器的登录权限等.即 ...