AngularJS UI Bootstrap merge two progress bars

Question

I have set up two progress bars in UI Bootstrap, however my goal is to merge them into one, main bar and a secondary one which only is in the form of a vertical bar.

Here is the HTML code for my progress bars:

<div>
  <h3 class="inline-block no-margin">Main</h3>
  <uib-progressbar value="95"
                   class="progress-xs no-radius"
                   type="success"></uib-progressbar>
  <h4 class="no-margin">SubCategory</h4>
  <uib-progressbar value="50"
                   class="progress-xs no-radius no-margin"
                   type="danger"></uib-progressbar>
</div>

My question is how can I merge these two so that the secondary one only appears as a small vertical bar on the main bar?

So that the main bar showing 95% of the bar and the subcategory showing only a vertical bar at 50%. enter image description here
There is an example similar to this in here called limit lines, but it is another old library.


Show source
| javascript   | angularjs   | angular-ui-bootstrap   2017-01-04 08:01 3 Answers

Answers ( 3 )

  1. 2017-01-06 18:01

    I haven't tried this out on my own, but it's what came to mind when I saw your question.

    You could modify the CSS of the ui-progressbars such that they were overlaid on one another; perhaps with an position:absolute or what have you. This would allow the numerical markers to all sit next to each other like you want.

    Next, you could modify the CSS of the bars themselves. Any bars less than the max, perhaps give them a .no-fill class or something. It would be tricky, but that way you can have any bars less than max % to only consist of a border-right property, while the max % bar would be the one with the background and all the normal progress bar styles.

    A gotcha that might show up is that you may also have to order the bars' z-index so that the largest value bar sits behind the lesser values and their vertical lines show up.

    Good luck!


    FINAL UPDATE (with plunkr)

    plunkr screenshot

    JS

    $scope.stacked = [{
      value: 55,
      type: 'info'
    }, {
      value: 95,
      type: 'success'
    }];
    

    HTML

    <div class="progress-wrapper">
      <uib-progress max="100" ng-repeat="bar in stacked | orderBy:'value':true">
        <uib-bar value="bar.value" type="{{bar.type}}">
          <span class="marker" ng-hide="bar.value < 5">
              {{bar.value}}%
            </span>
        </uib-bar>
      </uib-progress>
    </div>
    

    CSS

    /* wrapper to help us contain the bars and their positioning */
    .progress-wrapper {
      position: relative;
      padding-top: 30px;
    }
    
    /* make all progress bars the same, no bg so they 'stack' */
    .progress-wrapper .progress {
      width: 100%;
      position: absolute;
      overflow: visible;
      background: none;
    }
    
    /* first child is the background bar, give it color */
    .progress-wrapper .progress:first-child {
      background: #EEE;
    }
    
    /* make all bars invisible and with a right, border;
       except the last/furthest back bar, give it color only
    */
    .progress-wrapper .progress .progress-bar {
      background: none;
      border-right: solid 2px #FFF;
    }
    .progress-wrapper .progress:first-child .progress-bar {
      background: #0AF;
      border-right: none;
    }
    
    /* makes sure that markers behave,
       otherwise they'll fly away
    */
    .progress .progress-bar {
      position: relative;
    }
    
    /* style for marker element and drop triangle */
    .progress .marker {
      position: absolute;
      padding: 0 2px;
      top: -30px;
      right: -15px;
      color: #FFF;
      background: #000;
    }
    .progress .marker:after {
      content: '';
      width: 10px;
      height: 10px;
      background: #000;
      position: absolute;
      left: 30%;
      bottom: -5px;
      transform: rotate(45deg);
    }
    
  2. 2017-01-06 18:01

    You can make use of stacked progressbar with some custom styles.

    <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>
    
    $scope.stacked = [{
      value: 10,
      type: 'info'
    }, {
      value: 35,
      type: 'success'
    }];
    

    });

    enter image description here

    Refer progressbar in this https://angular-ui.github.io/bootstrap/

    My example is here https://plnkr.co/edit/9qCP1lV40BQ9DYDHvayo?p=preview

    I have edited the code in stacked progressbar. Think this helps.

    You can add custom styles to this to show the progress value.

  3. 2017-01-07 08:01

    You can make use of ng-style to update the position of a vertical line div in order to solve this problem. This will allow you to easily set the position and value of the vertical bar. Check out this working example on plunkr.:

    HTML

    <uib-progressbar animate="false" value=95 type="success"><b>95%</b></uib-progressbar>
    <div id="vertical-mark" ng-style="style()">&nbsp;{{mark}}%</div>
    

    JS

    $scope.mark = 50;
      $scope.style = function() {
        return {
          'left': $scope.mark + '%'
        }
      }
    

    CSS

    #vertical-mark {
      position:relative;
      border-left:1px solid #000;
      height:50px;
      top:-57px;
    }
    

    As an alternative I've also added a similar implementation with a stacked progress-bar.

◀ Go back