.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. 人脸识别的LOSS(上)

    超多分类的Softmax 2014年CVPR两篇超多分类的人脸识别论文:DeepFace和DeepID Taigman Y, Yang M, Ranzato M A, et al. Deepface: ...

  2. 【左偏树】[APIO2012]派遣

    题意可真的是有毒 第一眼树形背包可做?(反正我没用树形背包打过,边上巨佬打的背包似乎没拿分) 后来发现可以贪心搞,我们先把一个节点所有的儿子都取进去,之后不行的话再从大的开始拿走就好了 问题就变成了了 ...

  3. 【转载】gdb基本命令总结

    本文介绍使用gdb调试程序的常用命令. 主要内容: [简介] [举例] [其他] [简介]  ============= GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.如果你是在 U ...

  4. SpringData_01_SpringData的快速入门

    1.1SpringData JPA概述 Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套JPA应用框架,可使开发者用极简的代码即可实现对数据库的访问 ...

  5. 《DSP using MATLAB》Problem 8.26

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. Pandas对于CSV的简单操作

    Pandas对于CSV的简单操作 最近在研究pandas对于csv文件的读取以及一些操作,网上的信息比较乱,写篇博客记录一下,毕竟自己写的才是最适合自己的用法. 首先我们应该都知道,pandas是一个 ...

  7. python 之 heapq (堆)

    堆的实现通过构造二叉堆,实为二叉树的一种:这种数据结构具有以下性质: 任意节点小于(或大于)它的后裔,最小元(或最大元)在堆的根上 堆总是一颗完整树.即除了最低层,其它层的节点都被元素填满,且最低层极 ...

  8. 11-4-while和dowhile

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

  9. elasticsearch 中文API river

    river-jdbc 安装 ./bin/plugin --install jdbc --url http://xbib.org/repository/org/xbib/elasticsearch/pl ...

  10. 当双方Visual studio windows SDK不一样的时候的解决办法

    一. 把以前的SDK全部变成你的SDK 二.去重新装一个SDK版本和以前SDK一样的(这种解决办法太麻烦)