title: Change Bootstrap progress bar dynamically
body: <p>I have the following HTML code, using Bootstrap:</p>
  
  <pre><code>&lt;div class="progress"&gt;
                  &lt;div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I want <code>style="width: 0"</code> to increase until it is 100%. I tried to use the code below as a test, but nothing happened.</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Verifying Oracle database...&lt;/title&gt;
  
      &lt;script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"&gt;
      &lt;script type="text/javascript" src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          $(document).ready(function() {
              $("#progress-bar").css("width", "50%");
              $("#progress-bar").attr("aria-valuenow", "50%");
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p>Can someone help to make this progress happen?</p>
  
  <p>Thanks in advance.</p>