title: Animating progression bars on click
body: <p>I am trying to create a multi step form with a progression indicator but I am struggling to animate the progress bar, I want a simple animation which on the click increases the width from 0 to 100.</p>
  
  <p>I have created a replica of what I am working with here: <a href="https://jsfiddle.net/1zb9p8xo/" rel="nofollow noreferrer">https://jsfiddle.net/1zb9p8xo/</a></p>
  
  <p>Here is my code too:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.next').click(function() {
      $('.current').removeClass('current').hide().next().show().addClass('current');
      $('#progressbar li.active').next().addClass('active');
      if ($('#progress')) {};
  
    });
  
    $('.previous').click(function() {
      $('.current').removeClass('current').hide().prev().show().addClass('current');
      $('#progressbar li.active').removeClass('active').prev().addClass('active');
    });
  });
  
  
  
  $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
      $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
      if ($('.multi-field', $wrapper).length &gt; 1)
        $(this).parent('.multi-field').remove();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>fieldset {
    border: none;
    padding: 0;
  }
  #helpdeskform {
    position: relative;
  }
  #helpdeskform .field2,
  .field3 {
    display: none;
  }
  #helpdeskform .action-button {
    width: 100px;
    cursor: pointer;
  }
  #progressbar {
    overflow: hidden;
    background-color: #f6f6f6;
    counter-reset: step;
    padding: 0;
    box-sizing: border-box;
    color: #f6f6f6!important;
    position: relative;
  }
  #progressbar li {
    list-style-type: none;
    width: 33.333%;
    height: 100%;
    float: left;
    position: relative;
    color: #f6f6f6;
    position: relative;
  }
  #progressbar li:before {
    content: counter(step);
    width: auto;
    color: transparent;
    display: block;
    background: transparent;
  }
  #progressbar li.active:before,
  #progressbar li.active:after {
    background: #69bd45;
    margin-left: 0px;
    -webkit-transition: width 2s, height 4s;
    /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="helpdeskform" action="process.php" method="post"&gt;
  
    &lt;!-- Progress Bar --&gt;
    &lt;ul id="progressbar"&gt;
      &lt;li class="active first" style="width: 33.33%;"&gt;&lt;/li&gt;
      &lt;li class="second"&gt;&lt;/li&gt;
      &lt;li class="last"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;fieldset class="field1 current"&gt;
      &lt;h2&gt;Dashboard name&lt;/h2&gt;
      &lt;!-- Input --&gt;
      &lt;input type="text" name="dashboardName" placeholder="Dashboard name" /&gt;
      &lt;!-- Controls --&gt;
      &lt;input type="button" name="next" class="next action-button nextOne" value="Next" /&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset class="field2"&gt;
      &lt;h2&gt;Dashboard name&lt;/h2&gt;
      &lt;!-- Input --&gt;
      &lt;input type="text" name="dashboardName" placeholder="Dashboard name" /&gt;
      &lt;!-- Controls --&gt;
      &lt;input type="button" name="next" class="next action-button nextTwo" value="Next" /&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="previous" /&gt;
      &lt;button&gt;submit&lt;/button&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset class="field3"&gt;
      &lt;h2&gt;Dashboard name&lt;/h2&gt;
      &lt;!-- Input --&gt;
      &lt;input type="text" name="dashboardName" placeholder="Dashboard name" /&gt;
      &lt;!-- Controls --&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="previous" /&gt;
      &lt;button&gt;submit&lt;/button&gt;
    &lt;/fieldset&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>