title: Progress Bar in jquery showing reverse animation
body: <p>I want a progress bar . I downloaded one but it is showing reverse animation. I have tried figuring it out but nothing seems to work  Any idea how to fix it???</p>
  
  <p>this is my html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="progressbar.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="progressbar.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="skins/default/progressbar.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="progressBar" class="default"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  
  
  &lt;script&gt;
      progressBar(40, $('#progressBar'));
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my css</p>
  
  <pre><code>.default {
  background: #292929;
  border: 1px solid #111; 
  border-radius: 5px; 
  overflow: hidden;
  box-shadow: 0 0 5px #333;               
  }
  .default div {
  background-color: #1a82f7;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7)); 
  background: -webkit-linear-gradient(top, #0099FF, #1a82f7); 
  background: -moz-linear-gradient(top, #0099FF, #1a82f7); 
  background: -ms-linear-gradient(top, #0099FF, #1a82f7); 
  background: -o-linear-gradient(top, #0099FF, #1a82f7);
  }
  </code></pre>
  
  <p>and finally the javascript file</p>
  
  <pre><code>function progressBar(percent, $element) {
  var progressBarWidth = percent * $element.width() / 100;
  $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&amp;nbsp;");
  }
  </code></pre>
  
  <p>modified css</p>
  
  <pre><code>.default {
  background: #292929;
  border: 1px solid #111; 
  border-radius: 5px; 
  overflow: hidden;
  box-shadow: 0 0 5px #333;               
  }
  .default div {
  width: 0;
  background-color: #1a82f7;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
  background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
  background: -moz-linear-gradient(top, #0099FF, #1a82f7);
  background: -ms-linear-gradient(top, #0099FF, #1a82f7);
  background: -o-linear-gradient(top, #0099FF, #1a82f7);
  }
  </code></pre>