bootstrap-实现loading效果
可以使用bootstrap的模态框(modal.js),使用它我们可以做出loading效果。
html
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">提示</h4>
</div>
<div class="modal-body">
请稍候。。。<span id="result"></span>
</div>
</div>
</div>
</div>
js
//显示
$('#loading').modal('show');
//影藏
$('#loading').modal('hide');
bootstrap-实现loading效果的更多相关文章
- 页面loading效果
当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...
- 网页Loading效果
问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...
- 一个不错的loading效果--IT蓝豹
一个不错的loading效果 介绍:一个不错的loading加载效果,弹性收缩,效果不错,学习android动画的朋友可以下载来研究研究本例子其实由SeekBar实现,由MetaballView,Me ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- jQuery8种不同的瀑布流懒加载loading效果
优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果 在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- 加载状态为complete时移除loading效果
一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- 一个很酷的加载loading效果--IT蓝豹
一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...
随机推荐
- HDU-1009的解题报告
Hdu-1009 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1009 题意:Fatmouse准备M磅的猫食,准备与猫守卫仓库有他最爱吃的食品贸易,J ...
- snmp 里面oid对应的信息 MIB
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- spring mvc注解版01
spring mvc是基于servlet实现的在spring mvc xml版中已经说过了,注解版相较于xml版更加简洁灵活. web项目的jar包: commons-logging-1.1.3.ja ...
- Redis自学笔记:4.3进阶-排序
4.3排序 4.3.1有序集合的集合操作 有序集合没有zinter和zunion命令,使用其他命令实现方法: multi zinterstore tempKey ... zrange tempKey ...
- [mariadb]Windows Mariadb 10.2安装过程
在学习Flask的过程中,碰到SQLAlchemy不支持Mariadb 10.2.9以前版本的问题,于是升级Mariadb到10.2.10. 升级过程中,我只能说,Mariadb及Mysql的文档结构 ...
- BZOJ.5289.[AHOI/HNOI2018]排列(贪心 heap)
BZOJ LOJ 洛谷 \(Kelin\)写的挺清楚的... 要求如果\(a_{p_j}=p_k\),\(k\lt j\),可以理解为\(k\)要在\(j\)之前选. 那么对于给定的\(a_j=k\) ...
- JavaScript基础笔记(十三)测试和调试
错误处理与测试 一.错误处理 一)try-catch语句 function atest() { try { //可能发生错误的代码 return 0; } catch (error) { //错误处理 ...
- 后台执行Bitmap加载
如果加载图片时,使用的图片数据源不是来自于内存,而是来自硬盘或网络时,一般不会再UI线程执行图片加载操作. 图片的加载速度取决于很多方面(往往具有不可预测性),比如:硬盘或者网络的读写速度.图片大小. ...
- js 倒计时10s
<button id="send">允许点击</button> var wait = 10; function time(o){ if(wait==0){ ...
- async与await线程分配研究
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...