.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. GridView编辑删除

    A前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.asp ...

  2. [转]C#多线程学习 之 线程池[ThreadPool]

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  3. leetcode-03-二叉树的锯齿层次遍历

    题目描述: 方法一: # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self.va ...

  4. HTML - 表单标签相关

    <html> <head></head> <body> <!-- 表单标签 : 收集其标签内部的数据, 提交给指定的服务器 action : 数据 ...

  5. ConcurrentHashMap线程安全的具体实现方式/底层具体实现

    1. jdk1.7以及之前 ConcurrentHashMap 是由 Segment 数组结构和 HashEntry 数组结构组成. 通俗的话讲:就是首先将数据分为一段一段的存储,然后给每一段数据配一 ...

  6. 菜鸟安装 CocoaPods

    在 iOS 项目开发中,经常会用到第三方的源代码,CocoaPods 就是为了方便管理这些源码的工具. 在官方教程里面,安装看起来非常简单 $ [sudo] gem install cocoapods ...

  7. 我的服装DRP之即时通讯——为WCF增加UDP绑定(应用篇)

    发个牢骚,博客园发博文竟然不能写副标题.这篇既为我的服装DRP系列第二篇,也给为WCF增加UDP绑定系列收个尾.原本我打算记录开发过程中遇到的一些问题和个人见解,不过写到一半发现要写的东西实在太多,有 ...

  8. C++系列作业

    1.编写一个完整的程序,实现功能:向用户提问“现在正在下雨吗?”,提示用户输入Y或N.若输入为Y,显示“现在正在下雨.”:若输入为N,显示“现在没有下雨”:否则继续提问“现在正在下雨吗?” #incl ...

  9. 《DSP using MATLAB》Problem 8.4

    今天是六一儿童节,陪伴不了家人,心里思念着他们,看着地里金黄的麦子,远处的山,高高的天 代码: %% ------------------------------------------------- ...

  10. leetcode 854. K-Similar Strings

    给定两个字符串, 判断最少经过多少次swap 可以使得 两个字符串一致, 首先类似的问题 是存在一个 underlying graph 的. 每一个字母都对应着一个节点,两个字符串的不一致表示为图上的 ...