前端loading
来源:互联网 发布:巨人网络最新游戏 编辑:程序博客网 时间:2024/06/15 22:14
<style> .wrapper { position: relative; height: 100%; width: 100%; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #fff; } #loader { background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff; display: block; position: relative; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; z-index: 1001; } .loaded #loader { opacity: 0; } .loaded #loader-wrapper { display: none; }</style>
以上为前端css样式
<div class="wrapper" id="load" style="opacity: 0.8;z-index: 12;"> <div id="loader-wrapper"> <div id="loader"></div> </div></div>以上为loading 的div
JS中在js的success function中加入如下代码将loading隐藏即可
var s = document.getElementById("load");s.style.display = 'none';//或者:$('.wrapper').addClass('loaded');
阅读全文
0 0
- 前端loading
- 前端loading效果的实现
- 分享web前端七款HTML5 Loading动画特效集锦
- Loading.....
- loading...
- Loading
- loading
- loading
- loading
- Loading...
- Loading
- loading
- loading
- loading
- Loading...
- Loading...
- Loading...
- Loading
- textview加矩形边框和圆角边框
- 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 Minimum Distance in a Star Graph
- mybatis的动态SQL(一)if标签的使用
- 数据库中的事务隔离级别和锁的关系
- 如何设置USB为第一引导
- 前端loading
- 高软作业lab1
- 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 I GSM Base Station Identification(暴力,计算几何)
- 重温TCP-IP学习笔记- 2/3
- 花瓣导航栏
- context
- bzoj1010 [HNOI2008]玩具装箱toy(斜率)
- 网络编程-基于UDP的Socket网络编程(补充)
- Leetcode | Smallest Range(Hard)