表示サンプルはこちら。
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擬似要素で背景色と同じ小さい円を中央に置き、親の本体ごと回転させています。ドーナツ状のグラデーション円を直接作ることはできないので、小さい円でマスクする形です。