Animate a Bootstrap progressbar from 0 to 100%
<p>I'm using Twitter Bootstrap to build my web page.</p>

<p>I have this HTML code:</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-success"&gt;Connect&lt;/button&gt;
    &lt;button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt; Connect 1&lt;/a&gt;&lt;/li&gt;    
        &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt; Connect 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="progress"&gt;
    &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="alert alert-success" role="alert"&gt;Well done! You successfully connected. &lt;a href="#step2" class="alert-link"&gt;Next&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p></p>

<p>I want to animate the progress bar from 0 to 100% when user push the connect button or push the dropdown button (one of two) and when the progressbar reach 100% the script show the alert previously hidden.</p>