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%.
There is an example similar to this in here called limit lines, but it is another old library.