表示サンプルはこちら。
http://jsdo.it/goto_jp/qZRK
HTMLはこちら。
<span class='icon19'></span>
Sassの記述は下記になります。
$icon-width: 15px; $icon-height: 15px; $animationtime: 1s; $color-1: #069; .icon19 { display: inline-block; position: relative; vertical-align: middle; width: round($icon-width / 3); height: round($icon-height / 3); margin: round($icon-width / 3) * 2; -webkit-border-radius: $icon-width; -moz-border-radius: $icon-width; -ms-border-radius: $icon-width; -o-border-radius: $icon-width; border-radius: $icon-width; background: $color-1; animation: $animationtime bgColor-blink $animationtime/4 infinite; -webkit-animation: $animationtime bgColor-blink $animationtime/4 infinite; &:before, &:after { display: inline-block; content: ""; position: absolute; width: round($icon-width / 3); height: round($icon-height / 3); -webkit-border-radius: $icon-width; -moz-border-radius: $icon-width; -ms-border-radius: $icon-width; -o-border-radius: $icon-width; border-radius: $icon-width; background: $color-1; } &:before { left: - round($icon-width / 3) - round($icon-width / 10); animation: $animationtime bgColor-blink infinite; -webkit-animation: $animationtime bgColor-blink infinite; } &:after { right: - round($icon-width / 3) - round($icon-width / 10); animation: $animationtime bgColor-blink $animationtime/2 infinite; -webkit-animation: $animationtime bgColor-blink $animationtime/2 infinite; } } @keyframes bgColor-blink { 0% { background: rgba($color-1,1); } 50% { background: rgba($color-1,0); } 100% { background: rgba($color-1,1); } } @-webkit-keyframes bgColor-blink { 0% { background: rgba($color-1,1); } 50% { background: rgba($color-1,0); } 100% { background: rgba($color-1,1); } }
タグ本体、before、afterの擬似要素で3つ並んだドットを形成して、時間差で透明になるアニメーションを設定しています。
タグ本体もドットのサイズに小さくなっており、そのままだと隣接した要素にめり込んでしまうので適度にmarginを取るのがポイントです。