进度条控件有两种指令，第一种是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. 理解RESTful

    REST全称为Representational State Transfer,可以翻译为“表现状态转换”,是由是Roy Thomas Fielding在他2000年的博士论文中提出的,目的是为了得到一 ...

  2. python test

    #!/usr/bin/env python #-*- encoding: utf- -*- ''' def foo(name): print name, '去砍柴' foo('yangshanlei: ...

  3. MFC编程入门之十九（对话框：颜色对话框）

    在上一节中为大家讲解了字体对话框的使用方法,熟悉了字体对话框,本节继续讲另一种通用对话框--颜色对话框. 颜色对话框大家肯定也不陌生,我们可以打开它选择需要的颜色,简单说,它的作用是用来选择颜色.MF ...

  4. DataSet客户端分页实现

    window.$ClientPageHelper=function(fromDs,toDs){ var pageSize=toDs.get('pageSize'); var elist=fromDs. ...

  5. Rdseed与SAC的安装

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  6. sphinx全文检索 安装配置和使用

    公司项目刚刚导入大量产品数据,然后发现网站的产品搜索很卡,原本是原生sql的like来做模糊搜索,数据量20W的时候还可以接受,但是上百万就很卡了,所以需要做优化. 经过考虑,打算采用全文检索 sph ...

  7. 移动web点5像素的秘密

    最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神 ...

  8. mac命令学习记录

    1. 查找程序运行路径: which xxxx 2. 查找文件安装路径: whereis xxxx; 3. 编辑配置文件:vi ./.xxx : 进入需要编辑的文件: i  进行编辑  :输入:wq ...

  9. sql server sql语句导入数据到execl2007中

    insert into OPENROWSET('Microsoft.ACE.OLEDB.12.0','Excel 12.0;Database=C:\c.xlsx','select 字段1,字段2 FR ...

  10. JavaScript中如何获取某年某月有多少天的问题

    function getDaysInOneMonth(year, month){ month = parseInt(month,10); var d= new Date(year,month,0); ...