Animated Loading Background for i tag style Icons.

index.html

<i class="loading-wave"></i>

site.css

.loading-wave {
    zoom: 1;
    display: block;

    -moz-animation: move .8s infinite ease-in;
    -o-animation: move .8s infinite ease-in;
    -webkit-animation: move .8s infinite ease-in;
    animation: move .8s infinite ease-in;

    height: 16px;
    width: 10px;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%);
    background-repeat: no-repeat;
    background-size: 2px 2px, 2px 2px, 2px 2px;

    background-position: 0 0, 3px 0, 6px 0;
}

@keyframes move {
    0%      { background-position: 0 7px,   3px 4px,   6px 0; }
    12.5%   { background-position: 0 4px,   3px 0,     6px 4px; }
    25%     { background-position: 0 0,     3px 4px,   6px 7px; }
    37.5%   { background-position: 0 4px,   3px 7px,   6px 11px; }
    50%     { background-position: 0 7px,   3px 11px,  6px 14px; }
    67.5%   { background-position: 0 11px,  3px 14px,  6px 11px; }
    75%     { background-position: 0 14px,  3px 11px,  6px 7px; }
    87.5%   { background-position: 0 11px,  3px 7px,   6px 4px; }
    100%    { background-position: 0 7px,   3px 4px,   6px 0px; }
}

@-moz-keyframes move {
    0%      { background-position: 0 7px,   3px 4px,   6px 0; }
    12.5%   { background-position: 0 4px,   3px 0,     6px 4px; }
    25%     { background-position: 0 0,     3px 4px,   6px 7px; }
    37.5%   { background-position: 0 4px,   3px 7px,   6px 11px; }
    50%     { background-position: 0 7px,   3px 11px,  6px 14px; }
    67.5%   { background-position: 0 11px,  3px 14px,  6px 11px; }
    75%     { background-position: 0 14px,  3px 11px,  6px 7px; }
    87.5%   { background-position: 0 11px,  3px 7px,   6px 4px; }
    100%    { background-position: 0 7px,   3px 4px,   6px 0px; }
}

@-webkit-keyframes move {
    0%      { background-position: 0 7px,   3px 4px,   6px 0; }
    12.5%   { background-position: 0 4px,   3px 0,     6px 4px; }
    25%     { background-position: 0 0,     3px 4px,   6px 7px; }
    37.5%   { background-position: 0 4px,   3px 7px,   6px 11px; }
    50%     { background-position: 0 7px,   3px 11px,  6px 14px; }
    67.5%   { background-position: 0 11px,  3px 14px,  6px 11px; }
    75%     { background-position: 0 14px,  3px 11px,  6px 7px; }
    87.5%   { background-position: 0 11px,  3px 7px,   6px 4px; }
    100%    { background-position: 0 7px,   3px 4px,   6px 0px; }
}