进度条控件有两种指令，第一种是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. [Java] 特殊正则－替换字符串

    public class Test { public static void main(String[] args) { String str = "2412rhttp://192.168. ...

  2. Remove Duplicates from Sorted Array II [LeetCode]

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  3. YY前端课程-自习

    1. 默认的浏览器字体 100% = 1em  =1rem =16px  =12pt em继承父元素,rem只继承html根元素 2. text-align水平对齐影响一个元素中文本的水平对齐方式,控 ...

  4. Maven学习链接

    别人的资料很多且写的很详细,我这里先收藏,等学习到一定阶段且有时间再整理自己的积累. 1.eclipse安装maven插件方法: http://blog.csdn.net/kittyboy0001/a ...

  5. 节约内存：Instagram的Redis实践(转)

    一.问题:     数据库表数据量极大(千万条),要求让服务器更加快速地响应用户的需求. 二.解决方案:      1.通过高速服务器Cache缓存数据库数据      2.内存数据库 三.主流解Ca ...

  6. [转]http-关于application/x-www-form-urlencoded等字符编码的解释说明

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...

  7. shell脚本中的几个括号总结(小括号/大括号/花括号)--from:http://www.cnblogs.com/hanyan225/archive/2011/10/06/2199652.html

    在Shell中的小括号,大括号结构和有括号的变量,命令的用法如下: 1.${var}2.$(cmd)3.()和{}4.${var:-string},${var:+string},${var:=stri ...

  8. Spring整合HBase

    Spring整合HBase Spring HBase SHDP § 系统环境 § 配置HBase运行环境 § 配置Hadoop § 配置HBase § 启动Hadoop和HBase § 创建Maven ...

  9. vs安装后当切换到图形设计界面的时候自动弹出“正在准备安装的提升”,然后程序处于假死状态

    Vs2008 安装后当切换到图形设计界面的时候自动弹出 ”正在准备安装的提示“,然后程序处于假死状态 在网上找了很多,最终解决问题:  从vs2008安装光盘中找到 /WCU/WebDesignerC ...

  10. css外边距margin