jquery - Progress Bar inside a Progress Bar -

Is it possible to create a bellow effect like image possible with bootstrap?

An example: 86% Consider yourself 100% of lighter times to show the fastest of 86%. To show lightly, I'm thinking of adding a tooltip as a value.

The code I have so far is something like this.

  & lt; Div class = "container top-padding-less" & gt; & Lt; Div class = "progress" & gt; & Lt; Div class = "progress-time progress-bar-success" style = "width: 14%" & gt; 14% & lt; / Div & gt; & Lt; Div class = "progress-time progress-time-danger" style = "width: 86%" & gt; 86% & lt; Span style = "position: full; top: 0px; left: 0px;" & Gt; & Lt; Img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DCTca85okX0t3kIXH6qfV13WPwpxmj9NorumTfmkgvYlfopws6Z44IYo1PYSf1IUQgdIzgF-fhXWlMP2tIs83NKKxLD4blYfwWlWsBhXS055n0wcA0CslMwx9bDrdrYbWwXJtIlgq8Gt/s1600/BlueSquare.gif" style = "height: 10px; width: 30%;" & Gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Update:

  & lt; Div class = "progress" & gt; & Lt; Div class = "progress-time progress-bar-success" style = "width: 14%" & gt; 14% & lt; / Div & gt; & Lt; Div class = "progress-time progress-time-danger" style = "width: 86%" & gt; 86% & lt; Div class = "progress" & gt; & Lt; Div class = "progress-bar progress-bar-alert" style = "width: 30%" & gt; 30% & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

The result is: