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 ...
随机推荐
- Leetcode148. Sort List排序链表
在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2: 输入 ...
- css---3链接伪类与动态伪类
链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚 链接伪类不可以加在div上 <!DOCTYPE html> <html> <head> <m ...
- uoj51 元旦三侠的游戏
题意:询问a,b,n.每次可以a+1或b+1,保证a^b<=n,不能操作者输.问先手是否赢? n<=1e9. 标程: #include<cstdio> #include< ...
- 2016.9.10初中部上午NOIP普及组比赛总结
2016.9.10初中部上午NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1340 好不爽!翻车了!不过排名差不多在中间偏上一点, 还好不是 ...
- 【JZOJ1259】牛棚安排
description Farmer John的N(1<=N<=1000)头奶牛分别居住在农场所拥有的B(1<=B<=20)个牛棚的某一个里.有些奶牛很喜欢她们当前住的牛棚,而 ...
- csp-s模拟测试61砖块, 数字,甜圈题解
题面:https://www.cnblogs.com/Juve/articles/11626350.html 砖块: 直接模拟即可,map统计被覆盖的次数 #include<iostream&g ...
- 转:Wireshark基本介绍和学习TCP三次握手
源地址:http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html 之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS ...
- 一次读懂mybatis中的缓存机制
缓存功能针对于查询(没听说果UPDATE,INSERT语句要缓存什么,都是直接执行的) 默认情况下,mybatis会启用一级缓存. 如果使用同一个session对象调用了相同的SELECT语句,则直接 ...
- 01-python 学习第一天
今天是学习python语言的第一天,通过中国大学MOOC网的相关课程和其他在线教程,对python 语言有了初步的认识.今天我记住了<人生苦短,Python是岸>这句话.如果有人学习,建议 ...
- TensorFlow实战Google深度学习框架-人工智能教程-自学人工智能的第二天-深度学习
自学人工智能的第一天 "TensorFlow 是谷歌 2015 年开源的主流深度学习框架,目前已得到广泛应用.本书为 TensorFlow 入门参考书,旨在帮助读者以快速.有效的方式上手 T ...