loading 遮罩demo

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

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

<!doctype html>
<html>
<head>
<metacharset="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>
<divclass="loadingBar"date-loadTimg="0"><divclass="loadingIcon"><embedwidth="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

loading 遮罩demo相关推荐

ajax同步请求加上loading遮罩遇到的坑
ajax同步请求加上loading遮罩遇到的坑问题出在ajax被我设置成同步了,浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有 ...
【CSS实现Loading遮罩】点击按钮，弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题
需求:在发送请求的时候需要给全局加loading样式,初步实现在App.vue中直接包裹整个router-view,然后监听vuex中的值,值在封装axios的时候,即请求拦截以及响应请求的时候改变 ...
函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
功能需求编写点击按钮,弹出loading遮罩层提示正在加载中-,同时查询后台信息,拼接数据后渲染到列表时,为了保障渲染时,列表中的数据已经拼接完成.所以在for循环中使用同步ajax进行请求,在su ...
可伸缩搜索框旋转实现loading
以前在花瓣上看到的一个搜索框交互效果,找不到了.搜索标志获得焦点的时候拉伸成搜索框,失去焦点的时候缩回搜索标志,输入内容回车,则会先缩回搜索标志,而后旋转模拟loading.DEMO下载效果如图: - ...
cocos2d-x游戏开发(十五)游戏加载动画loading界面
个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...
element-ui clearable 不显示_从ElementUI的loading组件说起
原文地址: 从ElementUI的loading组件说起alfxjx.github.io 前言最近发现自己的主页首屏加载很慢,于是想用一个loading组件掩饰一下,这一下就来到了知识的荒原,对插 ...
【API解析】微软文本转语音(text-to-speech)官方Demo调用步骤
[API解析]微软文本转语音(text-to-speech)官方Demo调用步骤 1. 来源 github: MsEdgeTTS 吾爱破解:微软语音助手免费版,支持多种功能,全网首发微软Demo: ...
Loading 加载直到数据加载完再消失（vue-elementui）
自定义指令v-loading: 只需要绑定Boolean即可.(默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上.) &l ...

loading 遮罩demo

loading 遮罩demo相关推荐

最新文章

热门文章