title: HTML5 Progress bar with field level progression
body: <p><img src="https://i.stack.imgur.com/slUH4.png" alt="Progress bar"></p>
  
  <p>I am trying to create a HTML5 based progress bar with three steps. The objective I want to achieve is field level progression as well as step level progression.
  So the whole progress bar can be divided into two sections, where the first section is 50% and second section is 50% and if there are total 20 fields then after entering each field the progress bar moves 5% .Since want to implement this as well as include images in those steps. It's somehow not working out.</p>
  
   
  
  <pre><code>           &lt;div id="tmm-form-wizard" class="container substrate"&gt;
  
  
  
                  &lt;div class="row stage-container"&gt;
  
                      &lt;div class="stage tmm-current col-lg-4 col-md-4 col-sm-4 col-xs-4"&gt;
                          &lt;div class="stage-header personaldetails"&gt;&lt;/div&gt;
                          &lt;div class="stage-content"&gt;
                              &lt;h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;"&gt;Personal Details&lt;/h3&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--/ .stage--&gt;
  
                      &lt;div class="stage col-lg-4  col-md-4 col-sm-4 col-xs-4"&gt;
                          &lt;div class="stage-header planselection"&gt;&lt;/div&gt;
  
                          &lt;div class="stage-content"&gt;
                              &lt;h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;"&gt;Plan Selection&lt;/h3&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--/ .stage--&gt;
  
                      &lt;div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4 norightbar"&gt;
                          &lt;div class="stage-header reviewpay"&gt;&lt;/div&gt;
                          &lt;div class="stage-content"&gt;
                              &lt;h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;"&gt;Review and Pay&lt;/h3&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--/ .stage--&gt;
  
  
  
  
                  &lt;/div&gt;&lt;!--/ .row--&gt;
  
  
  
  
              &lt;/div&gt;&lt;!--/ .container--&gt;
  
      &lt;/div&gt; &lt;!--LOGO, NEED HELP AND PROGRESS CONTAINER ENDS--&gt;
  
      &lt;/nav&gt;&lt;!--FIXED NAVIGATION ENDS--&gt;
  </code></pre>
  
  <p> </p>
  
  <pre><code>            &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt; 
  
              &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"&gt; 
                   &lt;form action="" method="post" id="step1_form" name="step1_form"&gt;
  
                     &lt;span class="angel_font pan_no"&gt;PAN Number&lt;/span&gt;
                         &lt;input type="text" class="form-control input_outline" placeholder="Type your PAN Number (eg: BODPM4264E)" id="pan_text" name="pan_text" onblur="checkField(this)" maxlength="10" style="text-transform:uppercase;"/&gt;
                       &lt;p class="angel_font" id="err_msgpan"&gt;PAN card must contain a mix of Alphabets (A-Z) and Numbers (0-9)&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt;
  
  
              &lt;/div&gt; &lt;!--PAN NUM ENDS--&gt;
  
  
          &lt;div class="row"&gt; &lt;!--DOB TEXT STARTS--&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt; 
  
              &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"&gt; 
  
  
                     &lt;span class="angel_font dob"&gt;Date of Birth (as per PAN card)&lt;/span&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt;
  
  
          &lt;/div&gt; &lt;!--DOB TEXT ENDS--&gt;     
  
  
          &lt;div class="row"&gt; &lt;!--DOB FIELD STARTS--&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt;
  
              &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"&gt;
              &lt;input type="tel" class="input_outline" placeholder="DD" id="dd_text" name="dd_text" maxlength="2"  onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/&gt;  
              &lt;input type="tel" class="input_outline" placeholder="MM" id="mm_text" name="mm_text" maxlength="2"  onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/&gt;
              &lt;input type="tel" class="input_outline" placeholder="YYYY" id="yyyy_text" name="yyyy_text" maxlength="4"  onkeypress="return isNumber(event)" size="6" onblur="isEmpty(this)"/&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"&gt;&lt;/div&gt;
  
  
          &lt;/div&gt; &lt;!--DOB FIELD ENDS--&gt;  
  
  
  
  
  
  
  
  
  /*  Stage  */
      #tmm-form-wizard .stage:before,
      #tmm-form-wizard .stage:after                       { background-color: #ffffff; }  /*  Set color for STAGE LINE  */
      #tmm-form-wizard .stage-header                      { background-color: #d8e3ee;; }  /* Set background color for STAGE HEADER  */
      #tmm-form-wizard .stage-title                       { color: #464646; }             /*  Set color for STAGE TITLE  */
      #tmm-form-wizard .stage-info                        { color: #a8a8a8;}              /*  Set color for STAGE INFO  */
      /*  end Stage  */
  
      /*  Current stage  */
      #tmm-form-wizard .stage.tmm-current .stage-header       { background-color: #fabf00; }  /*  Set background color for CURRENT STAGE  */  
      #tmm-form-wizard .stage.tmm-current .stage-header.head-number   { color: #fff; }                /*  Set color for CURRENT STAGE TEXT  */
      #tmm-form-wizard .stage.tmm-current:after,
      #tmm-form-wizard .stage.tmm-current:before              { background-color: #fabf00; }  /*  Set background color for CURRENT STAGE LINE  */
      /*  end Current stage  */
  
      /*  Success stage  */
      #tmm-form-wizard .stage.tmm-success .stage-header       { background-color: #00a33e; }  /*  Set background color for SUCCESS STAGE  */  
      #tmm-form-wizard .stage.tmm-success .stage-header.head-number { color: #3c611b; }               /*  Set color for SUCCESS STAGE TEXT  */
      #tmm-form-wizard .stage.tmm-success:after,
      #tmm-form-wizard .stage.tmm-success:before              { background-color: #fabf00; }  /*  Set background color for SUCCESS STAGE LINE  */
      #tmm-form-wizard .stage.tmm-success .stage-header:after { color: #00a33e; }             /*  Set color for SUCCESS STAGE ICON  */
      /*  end Success stage  */
  
  
      #tmm-form-wizard.substrate                          { background-color: transparent !important; }       /*  Set background color for FORM SUBSTRATE  */
  </code></pre>