.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遮罩的更多相关文章

  1. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

  2. 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集

    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...

  3. [ASP.NET] 使用Loading遮罩防止使用者重複點擊

    From: http://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx 前言 在網頁執行中可能會因為資料量大或其他原因影響使用者 ...

  4. jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码

    //jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...

  5. 【WPF】BusyIndicator做Loading遮罩层

    百度了一下,粗略看了几个国内野人的做法,花了时间看下去感觉不太好用(比如有Loading居然只是作为窗体的一个局部控件的,没法全屏遮罩,那要你有何用?),于是谷歌找轮子去. 好用的轮子:http:// ...

  6. JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码

    (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...

  7. 一个Loading 遮罩效果

    1.需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的) .gdiv_over { display: none; position: absolute; top: ...

  8. 扩展easyUI tab控件,添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  9. ajax请求加全局loading , 个别特殊请求不显示loading

    项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

随机推荐

  1. BZOJ1597: [Usaco2008 Mar]土地购买——斜率优化

    题目大意: 将$n$个长方形分成若干部分,每一部分的花费为部分中长方形的$max_长*max_宽$(不是$max_{长*宽}$),求最小花费 思路: 首先,可以被其他长方形包含的长方形可以删去 然后我 ...

  2. 【学术篇】NOIP2016 D1T3 luogu1850换教室

    题目链接:点击这里献出你宝贵的时间(是用来做题不是捐赠Emmmm).. Emmmm我太弱了= = 做完这题我觉得我应该去打星际..这题怎么就有重边了呢.. 这题就是一道期望= =当时考场上好像完全不会 ...

  3. [Luogu2135] 方块消除【区间Dp】

    Online Judge:P2135 方块消除(这题不用预处理) Label:区间Dp 题目描述 Jimmy最近迷上了一款叫做方块消除的游戏.游戏规则如下:n个带颜色方格排成一列,相同颜色的方块连成一 ...

  4. CF627A Xor Equation

    题意:a+b=s,a^b=x(异或).问有多少有序Z+对(a,b)满足条件. 标程: #include<cstdio> using namespace std; typedef long ...

  5. A*算法——第K短路

    例题 JZOJ senior 1163第K短路 题目描述 Bessie 来到一个小农场,有时她想回老家看看她的一位好友.她不想太早地回到老家,因为她喜欢途中的美丽风景.她决定选择K短路径,而不是最短路 ...

  6. 2016.10.6初中部上午NOIP普及组比赛总结

    2016.10.6初中部上午NOIP普及组比赛总结 中了病毒--病毒--病毒-- 进度: 比赛:AC+0+0+20=120 改题:AC+0+AC+20=220 Stairs 好--简--单!递推就过了 ...

  7. 博弈论 | 暑期集训Day2学习总结

    今天的知识点为博弈论. 相比于昨天完全陌生难懂的概念,今天接触到的东西应该算是非常容易理解了,一下子又对ACM的学习重拾信心.毕竟game作为主题也吸引眼球,每种博弈背景下引入的游戏介绍也十分有趣.主 ...

  8. 12_PCA之探究用户对物品类别的喜好细分降维

    案例: 探究:用户对物品类别的喜好细分降维. 背景:把用户分成几个类别,分类的依据是用户购买了哪些物品. 先看商品products.csv数据,有product_id,product_name,ais ...

  9. [vagrant]vagrant centos静态ip设置

    vagrant 中使用的是public_network,而工作网络中,由于桥接了很多路由器,导致ip段位和本机的ip段位不在同一个局域网中 ifconfig之后的结果 [root@localhost ...

  10. Gym - 102021E

    Gym - 102021Ehttps://vjudge.net/problem/2109787/origin主要是一个处理精度的技巧,避免精度误差可以加eps,然后乘1e(小数点之后的位数). #in ...