bootstrap课程9 bootstrap如何实现动画加载进度条的效果
bootstrap课程9 bootstrap如何实现动画加载进度条的效果
一、总结
一句话总结：在bootstrap进度条的基础上添加js（定时器），动态的改变进度条即可。很简单的。
1、路径导航是什么？
就是面包屑导航
2、巨幕的特点是什么？
加了灰色的背景色，然后把里面的字变大看起来很宽大的感觉
二、bootstrap如何实现动画加载进度条的效果
1、相关知识
.breadcrumb
分页效果:
.pagination
上下页:
.pager
标签:
.label
.label-primary
.label-success
.label-info
.label-warning
.label-danger
徽章:
.badge
巨幕:
.jumbotron
缩略图:
.thumbnail
警告框:
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger
进度条:
.progress
2、代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
body{
padding-top:30px;
}
</style>
<link rel="stylesheet" href="bs/css/bootstrap.min.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<script src="bs/js/holder.min.js"></script>
</head>
<body>
<div class="container">
<h1 class='page-header'>Bootstrap框架</h1> <div class="progress">
<div class="progress-bar progress-bar-striped active" style='width:0%'>0%</div>
</div>
</div>
</body>
<script>
s=0;
v=10; sobj=setInterval(function(){
s+=v;
if(s>=100){
clearInterval(sobj);
}
$('.progress-bar').html(s+'%').css({'width':s+'%'});
},100);
</script>
</html>
bootstrap课程9 bootstrap如何实现动画加载进度条的效果的更多相关文章
- 【Demo】CSS3 动画 加载进度条
实例结果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
随机推荐
- swing导出html到excel
swing导出html到excel 1 ShowCopDetal package com.product; import java.awt.BorderLayout; import java.awt ...
- Eclipse如何新建一个tomcat_server发布web项目
方法/步骤 通过Eclipse打开一个正在开发阶段的java的web项目,没有项目的,只是为了学习的话,可以新建一个测试的java的web项目即可.在功能窗口找到如图所示的Servers窗口, ...
- 对win2012 server 虚拟机hyper-V 硬盘管理，容量变更及新增硬盘
目的:对win2012 server 虚拟机hyper-V 硬盘管理,容量变更及新增硬盘 一.压缩虚拟机硬盘容量 进入Server 2012的操作系统,打开CMD框,输入:diskmgmt.msc,回 ...
- 统计学习:《贝叶斯思维统计建模的Python学习法》中文PDF+英文PDF+代码
用数学工具解决实际问题仅有的要求可能就是懂一点概率知识和程序设计.而贝叶斯方法是一种常见的利用概率学知识去解决不确定性问题的数学方法,对于一个计算机专业的人士,应当熟悉其应用在诸如机器翻译,语音识别, ...
- 【VC++学习笔记五】SDI|MDI的全屏显示
一.Mainframe中添加一个记录是否全屏状态的变量BOOL m_bFullScreen. 二.工具栏添加一个按钮,进行全屏的操作,响应事件函数写在Mainframe中. 三.在响应函数中,添加如下 ...
- Python下opencv使用笔记（一）（图像简单读取、显示与储存）
写在之前 从去年開始关注python这个软件,途中间间断断看与学过一些关于python的东西.感觉python确实是一个简单优美.easy上手的脚本编程语言,众多的第三方库使得python异常的强大. ...
- 强制获取序列下一个值/当前值(oracle函数)
原文链接--http://blog.csdn.net/qq525099302/article/details/47146393 为什么要使用函数来获取序列值请看这里 -- 创建获取序列下一个值的函数 ...
- jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
//对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...
- 值得学习的html知识
这里零度为大家推荐几个值得学习的html知识,很有用的哦! 一.打开窗口即最大化 <script language="javaScript"> <!-- Begi ...
- sql server 内置MD5加密函数
http://blog.csdn.net/rookie_liu_ToFly/article/details/53116932 select right(sys.fn_VarBinToHexStr(HA ...