標籤：track animate style trap src ref 多個 分享 anim
原文地址：http://www.cnblogs.com/pilixiami/p/5723593.html
進度條控制項有兩種指令，第一種是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分享（十三）——Progressbar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
