如何使用Angular UI Bootstrap制作进度条

在这篇文章中，我们将看到如何使用Angular UI Bootstrap制作Dropdown。Angular UI Bootstrap是一个Angular JS框架，由Angular UI开发者创建，用于提供更好的UI，可以轻松使用。

语法:

<div uib-progressbar></div>

从链接中下载AngularUI：。

https://angular-ui.github.io/bootstrap

步骤:

首先，添加你的项目所需的Angular UI bootstrap脚本。

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js”></script>
<script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>

用它的UIBootStrap类做进度条，这将设置UI来寻找进度条。
现在使用不同的类制作不同类型的进度条并运行代码。

示例:

<!DOCTYPE html>
<html ng-app="gfg">
  <head>
  
    <!-- Adding CDN scripts required for our page -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
    </script>
    <script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
    </script>
  
    <script>
      // Adding Modules
      angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
      angular.module('gfg').controller('progressbar', function ($scope) {
      
     });
    </script>
    <link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
          rel="stylesheet">
  </head>
  <body>
    <div ng-controller="progressbar">
  
      <!-- making a progressbar -->
      <div class="column">
        <div><uib-progressbar class="progress-striped active" 
                              value="60" 
                              type='primary'>progressbar 1
          </uib-progressbar></div>
        <br>
        <div><uib-progressbar class="progress-striped active" 
                              value="20" 
                              type="success">progressbar 2
          </uib-progressbar></div>
        <br>
        <div><uib-progressbar class="progress-striped active" 
                              max="200" 
                              value="140" 
                              type="danger"><i>progressbar 3</i>
          </uib-progressbar></div>
  
      </div>
    </div>
  </body>
</html>

输出:

如何使用Angular UI Bootstrap制作进度条？