.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. JS数组 谁是团里成员(数组赋值)var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

    谁是团里成员(数组赋值) 数组创建好,接下来我们为数组赋值.我们把数组看似旅游团的大巴车,大巴车里有很多位置,每个位置都有一个号码,顾客要坐在哪个位置呢? 第一步:组个大巴车 第二步:按票对号入座 大 ...

  2. 显示和隐藏(display属性)none或block

    显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...

  3. Eureka服务治理学习笔记(摘抄)

    1.简介 EureKa在Spring Cloud全家桶中担任着服务的注册与发现的落地实现.Netflix在设计EureKa时遵循着AP原则,它基于R EST的服务,用于定位服务,以实现云端中间层服务发 ...

  4. 集合划分——cf1028D思维题

    非常思维的一道题目,题意很长 给定s1,s2两个集合,s1维护最大值,s2维护最小值,s1的所有元素要比s2小 操作1:往两个集合里的任意一个添加x 操作2:把x从所在的集合里删掉:要求被删的x必须是 ...

  5. 11-4-while和dowhile

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 在Jsp中调用静态资源,路径配置问题

    在Jsp中调用图片.JS脚本等,针对取得的路径有两种调用方式: 1.放入Body中生成绝对路径(不建议) <%@ page language="java" import=&q ...

  7. Umount- Linux必学的60个命令

    1.作用 umount命令的作用是卸载一个文件系统,它的使用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 unmount -a [-fFnrsvw] [-t vfstype] [-n ...

  8. 中国 SaaS 企业如何突围?这几点是关键!

    进入2019年,关于SaaS的各种言论甚嚣尘上,有人看好:“SaaS市场得大客户者得天下”,也有人唱衰:“SaaS已死,下一个”.在众说纷纭中,中国SaaS企业的成功之路迷雾重重,前期走的较早的头部S ...

  9. 使用git命令从github上clone项目

    首先创建本地仓库(实际上就是创建一个文件夹,放项目代码),然后cd进文件夹, 初始化空的git仓库 注意:这里不初始化也是可以clone的 然后git clone url(url表示项目网址) 然后就 ...

  10. leetcode算法题笔记|two sum

    题目: 我的答案: /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = ...