<style type="text/css">
/*<![CDATA[*/
.spinner {
    background: #ccc;
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    opacity: 0;
    position: relative;
    top: 10px;
    width: 8px;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-animation: spinner 2s infinite linear;
       -moz-animation: spinner 2s infinite linear;
            animation: spinner 2s infinite linear;
}
.spinner:after,
.spinner:before {
    background: #ccc;
    content: '';
    position: absolute;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}
.spinner:after {
    height: 6px;
    left: 2px;
    top: 10px;
    width: 6px;
}
.spinner:before {
    height: 4px;
    left: 9px;
    top: 15px;
    width: 4px;
}
@-webkit-keyframes spinner {
    0%   { opacity: 1; -webkit-transform: rotate(0deg);  }
    50%  { opacity: 1; background: #6bad76; }
    100% { opacity: 1; -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinner {
    0%   { opacity: 1; -moz-transform: rotate(0deg); }
    50%  { opacity: 1; background: #6bad76; }
    100% { opacity: 1; -moz-transform: rotate(360deg); }
}
@keyframes spinner {
    0%   { opacity: 1; transform: rotate(0deg); }
    50%  { opacity: 1; background: #6bad76; }
    100% { opacity: 1; transform: rotate(360deg); }
}
/*]]>*/
</style>

<p class="spinner">
</p>