title: Progress Bar using Style to Update Progress
body: <p>I'm creating a progress bar using a div with class from bootstrap css.</p>
  
  <p>I'm actually dynamically setting the value for the progress bar using JQuery.</p>
  
  <p>The process is getting the value for the progress bar then storing it into a HiddenField then retrieving this value from the HiddenField. Lastly, using JQuery to change the width and aria-valuenow for the progress bar.</p>
  
  <p>The issue is that, the progress bar is still set to 0 in terms of width and aria-valuenow. Could anyone please help me with that?</p>
  
  <p>Codes for progress bar,</p>
  
  <pre><code>&lt;div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;"&gt;
    &lt;h3 class="heading-progress"&gt;Login &amp; Login Failures (%) &lt;span class="pull-right" runat="server" id="Lbl_PercentageCheck"&gt;&lt;/span&gt;&lt;/h3&gt;
       &lt;div class="progress"&gt;
          &lt;div class="progress-bar" runat="server" aria-valuemax="100" aria-valuemin="0" role="progressbar"&gt;&lt;/div&gt;
    &lt;/div&gt;               
  </code></pre>
  
  <p></p>
  
  <p>Codes in script tag,</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var hfPercentage = parseFloat($('#hf_Percentage').val());
          $('.progress-bar').css('width', hfPercentage + '%').attr('aria-valuenow', hfPercentage);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And finally the HiddenField,</p>
  
  <pre><code>&lt;asp:HiddenField runat="server" ID="hf_Percentage" /&gt;
  </code></pre>
  
  <p>Im actually using a WebForm with a MasterPage, and the position of the HiddenField and Javascript is down below..
  Whereas the progress bar is placed nearer to the bottom before the closing tag of the ContentPlaceHolder.</p>
  
  <p><a href="https://i.stack.imgur.com/v6tHi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6tHi.jpg" alt="capture"></a></p>
  
  <p>I followed this link but it didn't work out..
  <a href="https://stackoverflow.com/questions/18531013/bootstrap-progress-bar-progression">This here</a></p>
  
  <p>I was thinking could it be the script not running at PageLoad or?</p>
  
  <p>Any help appreciated please.. Thank you!</p>
  
  <p>Image of it</p>
  
  <p><a href="https://i.stack.imgur.com/WpADk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WpADk.jpg" alt="Image"></a></p>
  
  <p>Codes Behind:</p>
  
  <pre><code>    int countLogin = al.pieLogin(username);
      int countLogout = al.pieLogout(username);
      int countFailure = al.pieFailure(username);
      int countChangePW = al.pieChangePW(username);
  
      //If more than 20%, prompt Admin to perform actions.
  
      double overallPercentageFull = Math.Round((countFailure * 100.0) / (countFailure + countLogin), 1);
  
      Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
      //Lbl_PercentageCheck.Style.Add("width", (overallPercentageFull).ToString() + "%");
      //Lbl_PercentageCheck.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());
  
      hf_Percentage.Value = overallPercentageFull.ToString();
  </code></pre>