Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to integrate progress bar with Angular UI Bootstrap

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.53k
    Comment on it

    How to integrate progress bar with Angular UI:

    To use progress bar in angular, you need to include the following code in your controller:

    Syntax:

    <uib-progressbar value="" max=></uib-progressbar>

    It has attributes like max and value in it and also animated transitions. You can add <uib-progressbar> a single element or multiple <uib-bar> into the same <uib-progress> element to represent the progress bar.

    • value: It specifies the current value of the progress bar that is completed.
    • type: It represents style type of bootstrap. 'success', 'info', 'warning', and, 'danger' are pre-defined styling.
    • max : It specifies the total value of bar.
    • animate : It is by default true. It represents animation of width in progress bar.

    Following Example will help you to understand:

    Example:

    HTML:

    <div ng-controller="ProgressCtrl">
    
        <h3>Static</h3>
        <div class="row">
            <div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
            <div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
            <div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
        </div>
    
        <hr />
        <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
        <uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
        
        <small><em>No animation</em></small>
        <uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
    
        <small><em>Object (changes type based on value)</em></small>
        <uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
        
        <hr />
        <h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
        <uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>
    
    </div>
    
    angular.module('ui.bootstrap.demo').controller('ProgressCtrl', function ($scope) {
      $scope.max = 200;
    
      $scope.random = function() {
        var value = Math.floor(Math.random() * 100 + 1);
        var type;
    
        if (value < 25) {
          type = 'success';
        } else if (value < 50) {
          type = 'info';
        } else if (value < 75) {
          type = 'warning';
        } else {
          type = 'danger';
        }
    
        $scope.showWarning = type === 'danger' || type === 'warning';
    
        $scope.dynamic = value;
        $scope.type = type;
      };
    
      $scope.random();
    
      $scope.randomStacked = function() {
        $scope.stacked = [];
        var types = ['success', 'info', 'warning', 'danger'];
    
        for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
            var index = Math.floor(Math.random() * 4);
            $scope.stacked.push({
              value: Math.floor(Math.random() * 30 + 1),
              type: types[index]
            });
        }
      };
    
      $scope.randomStacked();
    });
    
    
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: