loading遮罩
.loading{
position: relative;
cursor: default;
point-events: none;
text-shadow: none!important;
color: transparent!important;
-webkit-transition: all 0s linear;
transition: all 0s linear;
}
.loading:before {
position: absolute;
content: '';
top:;
left:;
background: rgba(255,255,255,.8);
width: 100%;
height: 100%;
border-radius: .28571429rem;
z-index:;
}
.loading:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: -1.5em 0 0 -1.5em;
width: 3em;
height: 3em;
-webkit-animation: segment-spin .6s linear;
animation: segment-spin .6s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 500rem;
border-color: #767676 rgba(0,0,0,.1) rgba(0,0,0,.1);
border-style: solid;
border-width: .2em;
box-shadow: 0 0 0 1px transparent;
visibility: visible;
z-index:;
}
@-webkit-keyframes segment-spin {
from {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
} @keyframes segment-spin {
from {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
从semantic-ui提取出来的,和loading的gif相比,好处在于,原来的内容不会变,只要增加一个class就可以了
值得注意的是,当前不支持ie9以下的版本
loading遮罩的更多相关文章
- WPF loading遮罩层 LoadingMask
原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...
- 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集
//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...
- [ASP.NET] 使用Loading遮罩防止使用者重複點擊
From: http://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx 前言 在網頁執行中可能會因為資料量大或其他原因影響使用者 ...
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
- 【WPF】BusyIndicator做Loading遮罩层
百度了一下,粗略看了几个国内野人的做法,花了时间看下去感觉不太好用(比如有Loading居然只是作为窗体的一个局部控件的,没法全屏遮罩,那要你有何用?),于是谷歌找轮子去. 好用的轮子:http:// ...
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
(function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...
- 一个Loading 遮罩效果
1.需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的) .gdiv_over { display: none; position: absolute; top: ...
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- ajax请求加全局loading , 个别特殊请求不显示loading
项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...
随机推荐
- 【左偏树】[LuoguP1456] Monkey King
多...多组数据... awsl 死命的MLE,原来是忘记清空数组了.... 左偏树模板? 对于每一个操作,我们把两个节点$x,y$的祖先$fx,fy$找到,然后把他们的左右儿子分别合并 最后把$v[ ...
- 回首2018 | 分析型数据库AnalyticDB: 不忘初心 砥砺前行
题记 分析型数据库AnalyticDB(下文简称ADB),是阿里巴巴自主研发.唯一经过超大规模以及核心业务验证的PB级实时数据仓库.截止目前,现有外部支撑客户既包括传统的大中型企业和政府机构,也包括众 ...
- fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询。
fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询. 例如: $result = M('User')->fetchSql(true)->find(1); 输出 ...
- 07.27NOIP模拟赛
戳这里下载过去三次NOIP模拟赛总成绩 (别嘲笑垫底的我...解压密码为信奥生所在的两个班的班号,文档密码为机房开机用户名+密码) 又一次垫底…… 我难受. 上来感觉T1不可做,T2和蔼可亲,T3一脸 ...
- duilib教程之duilib入门简明教程4.响应按钮事件
上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI; 也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...
- 使用vue-awesome-swiper滑块插件
基于之前写的vue2.0 + vue-cli + webpack 搭建项目( vue-awesome-swiper版本:3.1.3 ,swiper4,如果成功后没报错,但不显示分页样式,可能版本对不上 ...
- android Serializable 和 Parcelable 区别
android 中自定义的对象序列化的问题有两个选择一个是Parcelable,另外一个是Serializable. 一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过 ...
- 洛谷P5104 红包发红包
题目链接: P5104 题目分析: 题目和\(n\)是没什么关系的,因为是\(n\)个人抢,其实不一定抢完 其实很显然--就是求一个连续型随机变量的期望 首先设一个随机变量\(X\),表示第一个人拿到 ...
- 苹果CMS
本篇将主要讲解使用过程中普遍遇到的“问题”,这些问题并非是BUG,通常是需要我们自己去注意的一些点.(会结合用户反馈持续补充)http://www.maccms.com/doc/v10/faq.htm ...
- Java之io nio aio 的区别
这个问题最近面试总是遇到,作为一个只会写流水代码的程序员,一脸懵逼.看了网上的解释,看的还是很模糊,说下我对这个的理解. 先引出一个话题,两个大水缸,一个空一个满,让你把一个缸里面的水弄到另一个里面. ...