loading 遮罩demo

之前项目手写loading加载ingdemo, 其中涉及图片是项目中用到,

注意: loadingBar div需要放到页面内容最前面;  至于何时出现或者控制隐藏显示 可使用js灵活控制即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loading遮罩demo</title>
</head><body>
<style>
.loadingBar{background-color:white;display:block;text-align:center;position:fixed;width:100%;height:100%;top:0;left:0;z-index:9999}
.loadingBar:before{content:"";display:inline-block;height:100%;vertical-align:middle}
.loadingIcon{width:90px;height:90px;background-image:url(http://J.bjyyb.net/images/yiyingbaologo.png);background-size:65px auto;background-repeat:no-repeat;display:inline-block;vertical-align:middle;background-position:center center;position:relative;top:-30%}
#rotation{animation:rotation 1.8s linear infinite;-moz-animation:rotation 1.8s linear infinite;-webkit-animation:rotation 1.8s linear infinite;-o-animation:rotation 1.8s linear infinite}
@keyframes rotation{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@-moz-keyframes rotation{from{-moz-transform:rotate(360deg)}to{-moz-transform:rotate(0deg)}}
@-webkit-keyframes rotation{from{-webkit-transform:rotate(360deg)}to{-webkit-transform:rotate(0deg)}}
@-o-keyframes rotation{from{-o-transform:rotate(360deg)}to{-o-transform:rotate(0deg)}}
</style>
<div class="loadingBar"date-loadTimg="0"><div class="loadingIcon"><embed width="90"height="90"src="http://test.qdetong.com/public/images/rotation.svg"id="rotation"type="image/svg+xml"></embed></div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/litterjoan/articles/5801952.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/490043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos jupyter 安装_centos7安装 jupyter

Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本&#xff0c;支持运行 40 多种编程语言。Jupyter Notebook 的本质是一个 Web 应用程序&#xff0c;便于创建和共享文学化程序文档&#xff0c;支持实时代码&#xff0c;数学方程&#xff0c;可视化和 markdown…

IDEA自动生成try catch异常处理语句

在写Java程序时&#xff0c;有些方法需要我们对其进行异常处理&#xff0c;例如线程的join方法&#xff0c;IDEA可以自动帮我们生成try catch语句 现在写一个join方法&#xff0c;发现下划线报错&#xff0c;因为需要对其异常处理 我们将鼠标放到报错处&#xff0c;按下altent…

c++ map 获取key列表_好未来Golang源码系列一:Map实现原理分析

分享老师&#xff1a;学而思网校 郭雨田一、map的结构与设计原理golang中map是一个kv对集合。底层使用hash table&#xff0c;用链表来解决冲突 &#xff0c;出现冲突时&#xff0c;不是每一个key都申请一个结构通过链表串起来&#xff0c;而是以bmap为最小粒度挂载&#xff0c…

windows使用python3.4生成二维码

1.首先下载qrcode库 使用pip命令&#xff1a; pip install qrcode python3.x以上的版本默认是安装好pip的&#xff0c;如果出现无法找到pip指令的信息的话&#xff0c;则需要首先安装pip。 2.然后安装PIL库 二维码的生成需要生成图像文件&#xff0c;PIL&#xff08;Python Ima…

Gartner 2019 年 BI 炒作周期五大趋势:增强分析、数字文化、关系分析、决策智能、实施和扩展...

来源&#xff1a;云头条Gartner研究副总裁Jim Hare声称&#xff1a;“由于智能/情报是所有数字化业务的核心&#xff0c;IT和业务负责人继续将分析和商业智能&#xff08;BI&#xff09;视为创新投资方面的重中之重。该炒作周期帮助数据和分析负责人过渡到增强分析&#xff0c;…

swift 选中长按项_Swift下使用UICollectionView 实现长按拖拽功能

导读简单用Swift写了一个collectionview的拖拽点击排序效果;拖拽排序是新闻类的App可以说是必有的交互设计&#xff0c;如今日头条&#xff0c;网易新闻等。GitHub地址&#xff1a;https://github.com/wangliujiayou/Swift-dragLabel 欢迎Star.效果主要代码手势长按移动1.给Col…

IDEA实现类自动输出需要实现的方法

在IDEA中写实现类时可以自动输出需要实现的方法&#xff0c;具体见下 首先定义一个实现Runnable接口的类 发现报错了&#xff0c;接着把鼠标放置报错的地方&#xff0c;按下altenter&#xff0c;选择下面红框 此时就会出现需要我们实现的接口中方法&#xff0c;点击ok

字典的数据怎么转变为excel_Excel小技巧——快速为多行数据排列名次

大家好&#xff0c;上一期我们介绍了合并单元格的自动排序小技巧&#xff0c;今天&#xff0c;再为大家准备一个排名表&#xff0c;下面我们就利用这个表格&#xff0c;来了解一下快速排名的方法吧。首先&#xff0c;我们在第一行排名单元格中输入今天要学习的公式前半部分。公…

GIt 从入门到放弃

一、注册github账号 github网址https://github.com/ 下一步 然后&#xff0c;你的邮箱会收到一封邮件&#xff0c;进行邮箱验证就行了 二、创建github仓库 登录你的github&#xff0c;在首页的右方可以看到下图所示&#xff08;我已经创建过项目了&#xff0c;没有创建过项目的…

麻省理工牛人解说数学体系

来源&#xff1a;P.Linux‘s blog与 ima一、为什么要深入数学的世界作为计算机的学生&#xff0c;我没有任何企图要成为一个数学家。我学习数学的目的&#xff0c;是要想爬上巨人的肩膀&#xff0c;希望站在更高的高度&#xff0c;能把我自己研究的东西看得更深广一些。说起来&…

programing python_Programing in Python3(Second Edition)_实例

Programming in Python3 (Second Edition)实例前言&#xff1a;在学习Python的过程中推荐一本书&#xff0c;《Programming in Python3 》也就是我以前用过的。推荐理由是这本书讲的很全面很详细&#xff0c;有一些非常实用的实例可以提供给读者学习&#xff0c;学完以后不仅知…

IDEA提示方法参数的快捷键

在写Java方法的时候有时想让软件提示一下方法的参数&#xff0c;解决方法是将鼠标放置到方法括号里&#xff0c;按下ctrlp&#xff0c;即可显示方法参数

docker常用命令_docker常用命令整理

docker常用命令整理代码狂魔 • 5 天前 • 技术积累 • 14 • 0前面已经把docker是什么和 docker怎么安装已经写了&#xff0c;现在我将常用命令做一个整理&#xff0c;方便日后查阅常用命令docker pull ${CONTAINER NAME} #拉取镜像 docker images …

cuda矩阵相乘_cuda初学(1):稀疏矩阵向量乘法(单精度)

初步学习CUDA编程&#xff0c;实现简单稀疏矩阵向量乘法运算&#xff0c;由于硬件限制&#xff0c;目前只测试了单精度程序GPU计算子程序gpu_fmmv.cu&#xff1a;#include #include // CUDA-C includes#include#ifdef __cplusplusextern "C" {#endif// For Fortran…

素数问题是物质的几何学问题

来源&#xff1a;知乎大家知道&#xff0c;黎曼猜想、孪生素数猜想、哥德巴赫猜想中皆涉及素数&#xff08;质数&#xff09;。关于黎曼猜想&#xff0c;黄逸文说“这是1900年希尔伯特提出的23个唯一未被解决的问题&#xff0c;也是数学中最重大的未解决的难题。1859年&#xf…

IEEE期刊LaTeX模板

https://template-selector.ieee.org/secure/templateSelector/publicationType

shell sort 最后一列排序_没想到 Shell 命令竟然还能这么玩?| Shell 玩转大数据分析...

关于作者&#xff1a;程序猿石头(ID: tangleithu)&#xff0c;现任阿里巴巴技术专家&#xff0c;清华学渣&#xff0c;前大疆后端 Leader。正文开始本文是一个命令行工具的综合应用&#xff0c;将用一个具体的例子来阐述如何用 Shell 来进行高效地数据统计和分析。最近北京又开…

对于不是特别擅长Photoshop的人来说,熟悉和运用Photoshop工具提供的各类便捷的快捷键,是有帮助的。...

应用程序菜单快捷键之文件 应用程序菜单快捷键之编辑 应用程序菜单快捷键之图像图层 应用程序菜单快捷键 应用程序菜单快捷键之视图 Ctrl H 取消参考线调板菜单快捷键一览。 工具板快捷键一览 其他类别的快捷键。 按Shift时可画出正圆和方形的选区、图形、直线。 按Shift时可…

ireport参数传递json_Json传递数据两种方式(json大全)

1.Json传递数据两种方式(json大全)----------------------------字符串var list1 ["number","name"];var param{};param["list1"] list1;param["test"] "java";var jsonJSON.stringify(param);$.ajax({type:POST,url: CTX …

懂数学人的都认同:数学的本质[关联]万物(二)

来源&#xff1a;数学职业家结构、关系与信息关系是与结构绑定的不可分割的&#xff0c;是对结构从某个视角观察的结果&#xff0c;并且这个角度看到的是可以被观察者所理解和可感知的。这里的可感知&#xff0c;即是可以被人体的感觉系统&#xff08;如视觉、听觉、触觉等&…