title: AngularJS UI Bootstrap merge two progress bars
body: <p>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. </p>
  
  <p>Here is the HTML code for my progress bars:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h3 class="inline-block no-margin"&gt;Main&lt;/h3&gt;
    &lt;uib-progressbar value="95"
                     class="progress-xs no-radius"
                     type="success"&gt;&lt;/uib-progressbar&gt;
    &lt;h4 class="no-margin"&gt;SubCategory&lt;/h4&gt;
    &lt;uib-progressbar value="50"
                     class="progress-xs no-radius no-margin"
                     type="danger"&gt;&lt;/uib-progressbar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My question</strong> is how can I merge these two so that the secondary one only appears as a small vertical bar on the main bar?</p>
  
  <p>So that the main bar showing 95% of the bar and the subcategory showing only a <strong>vertical bar at 50%.</strong>
  <a href="https://i.stack.imgur.com/rDb22.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rDb22.png" alt="enter image description here"></a>
  <br>
  There is an example similar to this in <a href="http://bug7a.github.io/progressbar.js/" rel="nofollow noreferrer">here</a> called limit lines, but it is another old library.</p>