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如何实现动画加载进度条的效果的更多相关文章

  1. 【Demo】CSS3 动画 加载进度条

    实例结果图: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  3. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  4. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  5. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  6. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  7. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  8. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  9. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

随机推荐

  1. 让透明div里的文字不透明

    最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...

  2. ThinkPad X260 UEFI安装 win7 64位 方法

    ThinkPad X260   UEFI安装 win7 64位 方法 1.使用DG重新格式化硬盘,格式为GPT 2.使用CGI  安装 WIM文件 (image不知是否可以,下次测试) 3.改BIOS ...

  3. 海康录像机 POE 输送距离 实验

    条件:网线 使用亨通  (移动公司使用网线) 测试一:   网线  为130米    白天       摄像头正常录像 电压      3,7号线                 19.6V 测试二: ...

  4. Mysql数据库常规操作(建表、查询)

    一.表单操作 1-1.创建表 create table tb_name( id in primary key auto_increment);    1-2.查看表 desc table_name; ...

  5. centos 7 mongodb4.0 安装配置

    1.下载安装 cat <<EOF> /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0]name=MongoDB Repos ...

  6. 【VC++学习笔记四】MFC应用程序中框架类的获取

    一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...

  7. 洛谷 P1581 A+B Problem（升级版）

    P1581 A+B Problem(升级版) 题目背景 小明这在写作业,其中有一道A+B Problem ,他想啊想啊想,就是想不出来,于是就找到了会编程的你...... 题目描述 这里的A+B是很奇 ...

  8. [Python] Problem with Default Arguments

    Default arguments are a helpful feature, but there is one situation where they can be surprisingly u ...

  9. CSS 类、伪类和伪元素差别具体解释

    CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...

  10. win系统下的eclipse连接和使用linux上的hadoop集群

    准备工作 先在win系统的hosts文件中加入下面内容 10.61.6.164master     //hadoop集群的master节点 一.首先在eclipse上安装hadoop插件 下载hado ...