.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. C#中使用GUID

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  2. yii2 联系我们发送邮件报错

    为什么会报错,因为国内的邮件服务商要求发送邮件的人和设置的smtp服务器账号要相同,因为联系我们的是用户,也就是发件人是用户,而不是我们配置的邮箱,所有出错. 这里我用了个取巧的办法,发件人改为自己, ...

  3. iOS Xcode全面剖析

    链接:http://www.jianshu.com/p/3c8527898e84 一.创建新一个工程二.Xcode界面详细介绍三.Xcode菜单详解四.Xcode快捷键介绍五.结语六.参考资料 前言 ...

  4. vim学习相关链接

    1:http://blog.csdn.net/niushuai666/article/details/7275406 2:http://ju.outofmemory.cn/entry/79671 3. ...

  5. 用servlet来提取数据,并作统计,然后用jfreechart画图

    指定时间范围的数据提取,并做统计: 用servlet来提取数据,并作统计,然后用jfreechart画图. 使用的话,需要在web.xml里面配置相应的servlet,并且在index.jsp页面做引 ...

  6. React-Native基础_5.列表视图ListView

    列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React, { ...

  7. Windbg 调试工具32位/64位版本下载

    最新的Windbg调试工具32位/64位版本越来越不好下载了,这里通过CSDN的渠道给大家一个下载地址,帮助大家更好下载工具: https://github.com/EasyDarwin/Tools/ ...

  8. Xcode9 新功能

    翻译: https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/WhatsNewXcod ...

  9. 将sass快速引入到移动端项目中加速开发

    本文以上图为例子: 首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style; base下存放:样式重置_normalize.scss; 自己定义 ...

  10. stark组件

    写一个stark组件仿造admin的功能 1:新建一个stark的app 问题:在django每次启动会扫描目录下所有的admin文件,需要扫描项目目录下的每个stark文件,我们需要怎么做 1:看在 ...