title: How do I animate my CSS progress bar?
body: <p>I have this CSS progress bar right now and it animates great, but I wanted to add complete or not complete markers to it and I have no idea how to add those in there.</p>
  
  <p>So as they go through the progress bar the greyed out 'x' circle will either change to a green check mark circle or the red 'x' circle if it wasn't finished. Right now I just have a progress bar that moves with each step.</p>
  
  <p>Anyone know how I would add the circles to each step??</p>
  
  <p>This is what I'm going for..
  <img src="https://i.stack.imgur.com/vRBqI.jpg" alt="enter image description here"></p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;section class="container"&gt;
      &lt;input type="radio" class="radio" name="progress" value="five" id="five"&gt;
      &lt;input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked&gt;
   &lt;input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive"&gt;
      &lt;input type="radio" class="radio" name="progress" value="onehundred" id="onehundred"&gt;
      &lt;div class="progress"&gt;
        &lt;div class="progress-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;  &lt;label for="five" class="label"&gt;Accept Proposal&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for="twentyfive" class="label"&gt;Payment&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for="seventyfive" class="label"&gt;Review Documents&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for="onehundred" class="label"&gt;Complete&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol, ul {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  /*
   * Copyright (c) 2012-2013 Thibaut Courouble
   * http://www.cssflow.com
   *
   * Licensed under the MIT License:
   * http://www.opensource.org/licenses/mit-license.php
   */
  body {
    font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
    color: #464646;
  }
  
  .container {
    margin: 80px auto;
    width: 830px;
    text-align: center;
  }
  .container .progress {
    margin: 0 auto;
    width: 820px;
  }
  
  .progress {
    padding: 4px;
    background: rgba(226, 226, 226, 1);
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  }
  
  .progress-bar {
    position: relative;
    height: 7px;
    border-radius: 4px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  }
  .progress-bar:before, .progress-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .progress-bar:before {
    bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  .progress-bar:after {
    z-index: 2;
    bottom: 45%;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  }
  
  /*
   * Note: using adjacent or general sibling selectors combined with
   *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
   *       See this article for more info and a potential fix:
   *       http://css-tricks.com/webkit-sibling-bug/
   */
  #five:checked ~ .progress &gt; .progress-bar {
    width: 14.3%;
    background-color: #86e01e;
    text-align:left;
  }
  
  #twentyfive:checked ~ .progress &gt; .progress-bar {
    width: 38%;
   background-color: #86e01e;
  }
  
  #seventyfive:checked ~ .progress &gt; .progress-bar {
    width: 64%;
    background-color: #86e01e;
  }
  
  #onehundred:checked ~ .progress &gt; .progress-bar {
    width: 100%;
    background-color: #86e01e;
  }
  
  .radio {
    display: none;
  }
  
  .label {
    display: inline-block;
    margin: 0 5px 10px;
    padding: 3px 8px;
    color: #464646;
    cursor: pointer;
  }
  </code></pre>