CSS3：ロードアイコンパターン5

表示サンプルはこちら。
http://jsdo.it/goto_jp/bZ9l

HTMLはこちら。

<span class='icon5'></span>

Sassの記述は下記になります。

$icon-width: 20px;
$icon-height: 20px;
$color-1: #999;
$color-2: #fff;

$icon-width: 16px;
$icon-height: 16px;
$color-1: #333;
.icon5 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    border:solid $icon-width/2 $color-1;
    border-color: $color-1 rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    animation: 1s diamond infinite linear;
    -webkit-animation: 1s diamond infinite linear;
}
@keyframes diamond {
    0% {border-color: $color-1 rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25);}
    25% {border-color: rgba($color-1,.25) $color-1 rgba($color-1,.75) rgba($color-1,.50);}
    50% {border-color: rgba($color-1,.50) rgba($color-1,.25) $color-1 rgba($color-1,.75);}
    75% {border-color: rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25) $color-1;}
    100% {border-color: $color-1 rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25);}
}
@-webkit-keyframes diamond {
    0% {border-color: $color-1 rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25);}
    25% {border-color: rgba($color-1,.25) $color-1 rgba($color-1,.75) rgba($color-1,.50);}
    50% {border-color: rgba($color-1,.50) rgba($color-1,.25) $color-1 rgba($color-1,.75);}
    75% {border-color: rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25) $color-1;}
    100% {border-color: $color-1 rgba($color-1,.75) rgba($color-1,.50) rgba($color-1,.25);}
}

これは単純でborderの色を変えまくってるだけです。