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

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

  1.  <!DOCTYPE html>
  2.  <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link href="/Content/bootstrap.css" rel="stylesheet" />
  6.      <title></title>
  7.  
  8.      <script src="/Scripts/angular.js"></script>
  9.      <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
  10.      <script>
  11.          angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {
  12.              $scope.val = 90;
  13.          });
  14.      </script>
  15.  
  16.  </head>
  17.  <body>
  18.      <div ng-controller="ProgressDemoCtrl">
  19.          <uib-progressbar value="val" type="success">{{val}}%</uib-progressbar>
  20.      </div>
  21.  </body>
  22.  </html>

效果为：

其中，可使用的属性有：

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

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

  1.  <!DOCTYPE html>
  2.  <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <link href="/Content/bootstrap.css" rel="stylesheet" />
  6.      <title></title>
  7.  
  8.      <script src="/Scripts/angular.js"></script>
  9.      <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
  10.      <script>
  11.          angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {
  12.              $scope.bars = [
  13.                  { value: "30", type: "info" },
  14.                  { value: "30", type: "warning" },
  15.                  { value: "35", type: "danger" }
  16.              ];
  17.          });
  18.      </script>
  19.  
  20.  </head>
  21.  <body>
  22.      <div ng-controller="ProgressDemoCtrl">
  23.          <uib-progress>
  24.          <uib-bar ng-repeat="bar in bars track by $index" value="bar.value" type="{{bar.type}}">{{bar.value}}%
  25.              </uib-bar>
  26.          </uib-progress>
  27.      </div>
  28.  </body>
  29.  </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. P​D​F​二​次​开​发​_​i​S​t​y​l​e​P​D​F​表​单​域​的​填​充

    wo讲到PDF表单,我们首先需要认识Adobe定义的PDF表单有哪些.以下是我从网上搜索到的简单介绍: PDF 表单简介 PDF 是可移植文档格式(Portable Document Format)的 ...

  2. Strus2学习记录整理【持续更新】

    Strus2学习记录 以后的Strus2学习记录地址都会集合在这里,希望大家可以一起愉快学习,相互学习! Exception: 地址:http://www.cnblogs.com/gcs1995/p/ ...

  3. 【转】部分电脑安装升级 ubuntu 12.04 后无法挂起问题的解决(挂起无法唤醒同样有效)

    原文地址:http://blog.csdn.net/longerzone/article/details/7860232 我的Ubuntu12.04是安装的windows桌面安装版(使用wubi安装) ...

  4. Linux Oracle 转换编码格式

    [oracle@gpdb ~]$ sqlplus /nolog SQL> conn /as sysdba; SQL>select userenv('language') from dual ...

  5. Python递归报错：RuntimeError: maximum recursion depth exceeded in comparison

    Python中默认的最大递归深度是989,当尝试递归第990时便出现递归深度超限的错误: RuntimeError: maximum recursion depth exceeded in compa ...

  6. HDFS 核心原理

    HDFS 核心原理 2016-01-11 杜亦舒 HDFS(Hadoop Distribute File System)是一个分布式文件系统文件系统是操作系统提供的磁盘空间管理服务,只需要我们指定把文 ...

  7. freemarker数字格式化

    1.在模板中直接加.toString()转化数字为字符串,如:${languageList.id.toString()}: 2.在freemarker配置文件freemarker.properties ...

  8. 后台接收URL地址的参数

    其实很简单,只是写一下加强记忆 后台接收URL传递过来的参数有两种方法: 第一种用request接收 HttpServletRequest request = ServletActionContext ...

  9. Surface与SurfaceView、SurfaceHolder

    什么是Surface? android API的解释是:Handle onto a raw buffer that is being managed by the screen compositor ...

  10. 建站随手记:installation python virtualenv mezzanine -1

    aliyun的网络访问有时会有问题,pip有问题的时候使用豆瓣源 pip install $apptoinstall$ -i http://pypi.douban.com/simple ------- ...