.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. 【zznu-夏季队内积分赛3-I】逛超市

    题目描述 “别人总说我瓜,其实我一点也不瓜,大多数时候我都机智的一批“我宝儿姐背包学的太差了,你们谁能帮我解决这道题,我就让他做我的男朋友!宝儿姐现在在逛超市,超市里的种类实在是太多了,每种都有很多很 ...

  2. Linq的使用 <一>

    一.种类 1.Linq to Objects,实现了IEnumerable<T>集合对象的集成查询 2.Linq to sql,针对关系数据库MSSQL的解释查询 3.Linq to En ...

  3. ZOJ 2971 Give Me the Number (模拟,字符数组的清空+map)

    Give Me the Number Time Limit: 2 Seconds      Memory Limit: 65536 KB Numbers in English are written ...

  4. UML_02_概述

    一.前言 UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言 二.分类 UML 的核心是图表,大致可以将 ...

  5. Linux下第一次Node尝试

    由于需求所定,必须在服务器上使用nodejs,第一次使用过程记录下来. 首先是安装node,这里可以下载到各个版本的node:https://nodejs.org/download/ 我是进入rele ...

  6. LeetCode OJ : Different Ways to Add Parentheses(在不同位置增加括号的方法)

    Given a string of numbers and operators, return all possible results from computing all the differen ...

  7. 监控摄像机常识:宽动态 (WDR)介绍和理解

    安装和使用监控摄像机经常会遇到强光问题. 因为我们不可能灵活选择摄像机的安装位置, 解决或者处理强光是一个无法避免的问题. 不管是由反光材质或者灯源造成此反光, 解决问题的方案来自于摄像机支持的一个特 ...

  8. 我的第一个React自定义组件

    今天随便翻了一下antd的组件库,看到下面这样的组件,当时我就震惊了: 这尼玛,这是出于什么样的考虑,一个列表还要用户编写子项的渲染方式. 所以,我就自己写了一个 List.js: List.less ...

  9. softmax的多分类

    关于多分类 我们常见的逻辑回归.SVM等常用于解决二分类问题,对于多分类问题,比如识别手写数字,它就需要10个分类,同样也可以用逻辑回归或SVM,只是需要多个二分类来组成多分类,但这里讨论另外一种方式 ...

  10. ios 10.3下载 Xcode8配置支持 ios 10.3下载

    一不小心,手机又升级了,哎