AngularJS UI Bootstrap объединяет два индикатора выполнения

Вы можете использовать ng-style для обновления положения вертикальной линии div, чтобы решить эту проблему. Это позволит вам легко установить положение и значение вертикальной полосы. Посмотрите этот рабочий пример на 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;
}

В качестве альтернативы я также добавил аналогичную реализацию с индикатором выполнения с накоплением.

Я не пробовал это сам, но это то, что пришло мне в голову, когда я увидел ваш вопрос.

Вы можете изменить CSS ui-progressbars так, чтобы они накладывались друг на друга; возможно с position:absolute или что у вас есть. Это позволит всем числовым маркерам располагаться рядом друг с другом, как вы хотите.

Затем вы можете изменить CSS самих полос. Любые бары меньше максимального, возможно, присвойте им класс .no-fill или что-то в этом роде. Это было бы сложно, но таким образом вы можете иметь любые полосы меньше максимального %, чтобы они состояли только из свойства border-right, в то время как полоса максимального % была бы полосой с фоном и всеми обычными стилями индикатора выполнения.

Подвох, который может возникнуть, заключается в том, что вам также может потребоваться упорядочить столбцы z-index так, чтобы столбец с наибольшим значением находился за меньшими значениями, а их вертикальные линии отображались.

Удачи!

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ (с plunkr)

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);
}

Вы можете использовать составную полосу прогресса с некоторыми пользовательскими стилями.

<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'
}];

});

Обратитесь к индикатору выполнения в этом https://angular-ui.github.io/bootstrap/.

Мой пример здесь https://plnkr.co/edit/9qCP1lV40BQ9DYDHvayo?p=preview

Я отредактировал код в сложенном индикаторе выполнения. Думаю, это помогает.

Вы можете добавить к этому пользовательские стили, чтобы показать значение прогресса.