PROGRESS - Animated Logo - BIZAMAJIG USAGE

http://codepen.io/anon/pen/epbWNj?editors=110

by bizamajig

HTML

<div class="bizamajig-progress"> <!-- progress-messaging fade -->
    <hr class="progress-messaging-2-1" />
    <hr class="progress-messaging-2-2" />
    <hr class="progress-messaging-2-3" />
    <hr class="progress-messaging-2-4" />
</div>

CSS

/* START BIZAMAJIG Preloader for ajax calls - Bizamajig Flower */
/* Absolute Center Spinner */
.bizamajig-progress {
    display: none;
}
.progress-messaging {
    margin: auto;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: table;

    width: 2em;
    height: 2em;
    width: 300px;
    height: 154px;

    overflow: show;
    z-index: 999;
}
/* Transparent Overlay */
.progress-messaging:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba( 246, 254, 211, 0.7 ); /* Funky 1 = rgba( 254, 251, 211, 0.7 ), Orange = rgba( 254, 238, 211, 0.7 ), Green = rgba( 239, 252, 222, 0.7 ), Purple = rgba( 236, 238, 254 , 0.7 ), Yellow = rgba( 253, 247, 229, 0.7 ) */
}
/* Create our animated parts */
.progress-messaging .progress-messaging-2-1 {
    background-image: url("http://bizamajig.com/images/bizamajig-ui/progress-messaging-2-1.png");
}
.progress-messaging .progress-messaging-2-2 {
    background-image: url("http://bizamajig.com/images/bizamajig-ui/progress-messaging-2-2.png");
}
.progress-messaging .progress-messaging-2-3 {
    background-image: url("http://bizamajig.com/images/bizamajig-ui/progress-messaging-2-3.png");
}
.progress-messaging .progress-messaging-2-4 {
    background-image: url("http://bizamajig.com/images/bizamajig-ui/progress-messaging-2-4.png");
}
.progress-messaging .progress-messaging-2-1,
.progress-messaging .progress-messaging-2-2,
.progress-messaging .progress-messaging-2-3,
.progress-messaging .progress-messaging-2-4 {
    opacity: 0;
    background-repeat: no-repeat;
    border: none;
}
.progress-messaging .progress-messaging-2-1 {
    margin: 0;
    width: 0;
    width: 300px;
    height: 154px;
    position: absolute;
    display: block;
}
.progress-messaging .progress-messaging-2-2,
.progress-messaging .progress-messaging-2-3,
.progress-messaging .progress-messaging-2-4 {
    margin: 0;
    position: absolute;
   ...