进度条控件有两种指令，第一种是uib-progressbar指令，表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令，表示多种颜色和多个进度组合而成的一个进度条。

这是一个使用uib-progressbar指令的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {

             $scope.val = 90;

         });

     </script>

 </head>

 <body>

     <div ng-controller="ProgressDemoCtrl">

         <uib-progressbar value="val" type="success">{{val}}%</uib-progressbar>

     </div>

 </body>

 </html>

效果为：

其中，可使用的属性有：

 属性名  默认值 备注 
 value    进度条当前的值
type   null  进度条类型，可设置为success, info, warning, danger
max  100   进度条的最大值
animate   true  是否启用动画
 title  progressbar  辅助用的标题

另一种进度条是组合多个进度的进度条：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {

             $scope.bars = [

                 { value: "30", type: "info" },

                 { value: "30", type: "warning" },

                 { value: "35", type: "danger" }

             ];

         });

     </script>

 </head>

 <body>

     <div ng-controller="ProgressDemoCtrl">

         <uib-progress>

         <uib-bar ng-repeat="bar in bars track by $index" value="bar.value" type="{{bar.type}}">{{bar.value}}%

             </uib-bar>

         </uib-progress>

     </div>

 </body>

 </html>

效果为：

uib-progress可使用的属性有：max、animate、title，uib-bar可使用的属性有value、type、title，这些属性的用法和uib-progressbar一样。

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  9. AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

    Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样.来看一个最简单的例子: <!DOCTYPE html> <html ng ...

随机推荐

  1. md语法之行内代码和代码片续集

    md语法之行内代码和代码片 一行之内嵌入一小段代码, 简称行内代码. 其方法为: 用撇号把代码围起来. 比如: import numpy as ny就可以了. 代码片的方法: 三个连续的撇号+pyth ...

  2. c++程序判断系统是Linux还是Windows

    用C++来实现,本来想了很多,后来越写越烂,而且结果总是不尽人意,干脆这样子好了: int main() { int judge = system("cls"); ) cout & ...

  3. Linux 命令——简约汇总

    1. 更改档案拥有者 命令 : chown [-cfhvR] [--help] [--version] user[:group] file... 功能 : 更改文件或者文件夹的拥有者 参数格式 :  ...

  4. 在Eclipse中添加C/C++插件

    如果尚未安装 Eclipse,可直接下载包含C/C++的 Eclipse IDE http://www.eclipse.org/downloads/eclipse-packages/?osType=l ...

  5. 2016年12月31日 学习java 第一天

    6个月没写代码了 现在从头开是学 又遇到了很基础的问题 以前配环境变量的时候  配过classpath  其实不要配classpath  因为运行的时候会优先去classpath去找 class文件  ...

  6. 解决UIButton 连续点击重复响应事件问题

    经常会遇到重复点击某个按钮 事件被响应多次的情景, 有时候可能对程序本身并没有什么影响 , 可有时候偏偏需要限制button响应事件直接的间隔 . 方法一 : 标记 1 . 利用空闲enable属性来 ...

  7. Sass预一：

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  8. MVC5+EF6 入门完整教程八

    本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时,已经介绍过一种更新数据库的方式: EF比较model和database,如果两边不一致,程序将会drop and ...

  9. 关于链接到QQ客服的问题，原来只需要在a标签上加一串话而已呐~~~~

    <a class="btn" target=blank href=tencent://message/?uin=&Site=www.woyouli.com&M ...

  10. Shell中的空格和引号

    空格对于linux的shell是一种很典型的分隔符,所以给变量赋值的时候中间不能够有空格.而单引号和双引号,都是为了解决中间有空格的问题.比如string1=this is a string,这样执行 ...