EzDevInfo.com

animate.css

A cross-browser library of CSS animations. As easy to use as an easy thing. Animate.css

Get it on Github
Language : CSS

http://daneden.github.io/animate.css

How do I animate my CSS progress bar?

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.. enter image description here

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;
}

animate.css

Define Shake?

What's the problem then?