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

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

HTMLはこちら。

<span class='icon17'></span>

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

$icon-width: 20px;
$icon-height: 20px;
$animationtime: 1s;
$color-1: #f66;

.icon17 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    margin: round($icon-width/5);
    animation: $animationtime scale-half infinite;
    -webkit-animation: $animationtime scale-half infinite;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        width: round($icon-width/2);
        height: $icon-height;
        top:50%;
        background: $color-1;
        -webkit-border-radius: $icon-width $icon-width 0 0;
        -moz-border-radius: $icon-width $icon-width 0 0;
        -ms-border-radius: $icon-width $icon-width 0 0;
        -o-border-radius: $icon-width $icon-width 0 0;
        border-radius: $icon-width $icon-width 0 0;
    }
    &:before {
        margin-top: - $icon-height/2;
        left:round($icon-width/20);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    &:after {
        margin-top: - $icon-height/2;
        right:round($icon-width/20);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}
@keyframes scale-half {
    0% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes scale-half {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

before・afterの擬似要素でハートを作って、transform:scaleの拡大縮小で鼓動するように動かしています。