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

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

HTMLはこちら。

<span class='icon16'></span>

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

$icon-width: 20px;
$icon-height: 20px;
$animationtime: 1s;
$color-1: #069;
$color-background: #fff;

.icon16 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    -webkit-border-radius:$icon-width;
    -moz-border-radius:$icon-width;
    -ms-border-radius:$icon-width;
    border-radius:$icon-width;
    overflow: hidden;
    animation:$animationtime rotate linear infinite;
    -webkit-animation: $animationtime rotate linear infinite;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
    }
    &:before {
        width: $icon-width;
        height: round($icon-height/2);
        top: 0;
        left: 0;
        background-image: linear-gradient(to right, rgba($color-1, 0), rgba($color-1, 1));
        background-image: linear-gradient(to right, rgba($color-1, 0), $color-1);
        background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba($color-1, 0)), color-stop(100%, $color-1));
        background-image: -webkit-linear-gradient(left, rgba($color-1, 0), $color-1);
        background-image: -moz-linear-gradient(left, rgba($color-1, 0), $color-1);
        background-image: -o-linear-gradient(left, rgba($color-1, 0), $color-1);
        background-image: linear-gradient(left, rgba($color-1, 0), $color-1);
        z-index: 1;
    }
    &:after {
        width: round($icon-width/2);
        height: round($icon-height/2);
        -webkit-border-radius:$icon-width;
        -moz-border-radius:$icon-width;
        -ms-border-radius:$icon-width;
        border-radius:$icon-width;
        top:50%;
        left:50%;
        margin-top: - round($icon-height/4);
        margin-left: - round($icon-width/4);
        background: $color-background;
        z-index: 2;
    }
}

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

今回はいかにもロード中らしいアイコンです。

before擬似要素で本体の半分の大きさのグラデーション付きの箱を生成し、after擬似要素で背景色と同じ小さい円を中央に置き、親の本体ごと回転させています。ドーナツ状のグラデーション円を直接作ることはできないので、小さい円でマスクする形です。