How do I animate my CSS progress bar?

Question

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.

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.

Anyone know how I would add the circles to each step??

This is what I'm going for..

My HTML

<section class="container">
    <input type="radio" class="radio" name="progress" value="five" id="five">
    <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
 <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>  <label for="five" class="label">Accept Proposal</label></td>
      <td><label for="twentyfive" class="label">Payment</label></td>
      <td><label for="seventyfive" class="label">Review Documents</label></td>
      <td><label for="onehundred" class="label">Complete</label></td>
    </tr>
  </tbody>
</table>
  </section>

My CSS

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 > .progress-bar {
  width: 14.3%;
  background-color: #86e01e;
  text-align:left;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 38%;
 background-color: #86e01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 64%;
  background-color: #86e01e;
}

#onehundred:checked ~ .progress > .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;
}

Answer 1

HTML:

<section class="container">
    <div class="progress">
        <div class="progress-point">
            <p id="progress_0" class="progressPoint displayNone" style="width: 0%;">

            </p>
            <p id="progress_20" class="progressPoint " style="width: 20%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_20_status">
            </p>
            <p id="progress_40" class="progressPoint " style="width: 40%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_40_status">
            </p>
            <p id="progress_60" class="progressPoint " style="width: 60%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_60_status">
            </p>
            <p id="progress_80" class="progressPoint " style="width: 80%;">
                <input type="radio" class="progressStatus" name="progress_status" id="progress_80_status">
            </p>
            <p id="progress_100" class="progressPoint displayNone" style="width: 100%;">

            </p>
        </div>
      <div id="progress" class="progress-bar" style="width:40%;"></div>
    </div>
  </section>

CSS:

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/
 */
.progress-bar {
  width: 14.3%;
  background-color: #86e01e;
  text-align:left;
}

#twentyfive:checked ~ .progress > .progress-bar {
 background-color: #86e01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 64%;
  background-color: #86e01e;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}


.label {
  display: inline-block;
  margin: 0 5px 10px;
  padding: 3px 8px;
  color: #464646;
  cursor: pointer;
}
.progressPoint {
    float: left;
    position: absolute;
    text-align: right;
}
.progress-point {
    width: 100%;
    position: relative;
}
.displayNone {
    display: none;
}
.displayBlock {
    display: block;
}
.progressStatus {
    margin: 0px;
    top: -5px;
    position: relative;
    z-index: 5;
}

JavaScript:

function currentProgress() {
    var progress=parseInt(document.getElementById("progress").style.width);
    if(progress >= 20 || progress >= 40 || progress >= 60 || progress >= 80) {
        if(progress >= 20) {
            document.getElementById("progress_20_status").checked = true;
        }
        if(progress >= 40) {
            document.getElementById("progress_40_status").checked = true;
        }
        if(progress >= 60) {
            document.getElementById("progress_60_status").checked = true;
        }
        if(progress >= 80) {
            document.getElementById("progress_80_status").checked = true;
        }
    }
}

Note: You need to update the width of progress-bar div and call currentProgress() function as you receive the percentage of work completed. And also the CSS of the radio button used to show progress status.