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

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

HTMLはこちら。

<span class='icon20'></span>

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

.icon20 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    -webkit-border-radius: round($icon-width/5);
    -moz-border-radius: round($icon-width/5);
    -ms-border-radius: round($icon-width/5);
    -o-border-radius: round($icon-width/5);
    border-radius: round($icon-width/5);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    overflow: hidden;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        top:50%;
        left:50%;
    }
    &:before {
        width: round($icon-width / 2);
        height: round($icon-height * 1.5);
        background: $color-1;
        margin-top:- round(round($icon-height * 1.5) / 2);
        margin-left:- round(round($icon-width / 2) / 2);
        -webkit-box-shadow: 0 0 round($icon-width / 3) $color-1;
        -moz-box-shadow: 0 0 round($icon-width / 3) $color-1;
        box-shadow: 0 0 round($icon-width / 3) $color-1;
        animation: $animationtime rotate linear infinite;
        -webkit-animation: $animationtime rotate linear infinite;
    }
    &:after {
        width: $icon-width - round($icon-width/10);
        height: $icon-height - round($icon-height/10);
        background: $color-background;
        margin-top:- ($icon-height - round($icon-height/10)) / 2;
        margin-left:- ($icon-width - round($icon-width/10)) / 2;
        -webkit-border-radius: round($icon-width/5);
        -moz-border-radius: round($icon-width/5);
        -ms-border-radius: round($icon-width/5);
        -o-border-radius: round($icon-width/5);
        border-radius: round($icon-width/5);
    }
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

まずタグ本体は少し角丸をつけ45度傾けた透明の菱型とします。
overflow:hiddne を使い、この範囲でのみ表示させるようにします。

before要素は本体より少し狭いブロックとして中央配置し回転させます。

after要素を本体より少し小さい同じ形状として中央配置しbefore要素をマスクすることで、本体の幅とafter要素の幅の差の隙間からbefore要素が覗き見え、筋を走るようなビジュアルになります。