水銀が流れるようにくっついたり離れたりしながら回るローディングスピナー

SVGのフィルター機能を使用して、簡単なHTMLとCSS3のみで面白い動作をするローディングスピナーを作ってみました。

Chromeでしか確認してなくて公開してましたが、他のブラウザでは正常に表示されないことがありますのでご注意を。
firefoxだと、他のページからAjaxで移動してきたときには表示されません（ページをリロードすればかろうじて表示される）し、SafariではSVGフィルターがかからずに丸い物体が回っているだけの状態になります。

IEだとどんな感じになるのか想像もできません。

元ネタはCreative Gooey Effectsで、JavaScriptなどを取り除いてシンプルにして動作をわかりやすくしました。見ていて飽きないと思いませんか？

SVGって単なるベクター画像に使用するだけじゃなくて活用できますね。

HTMLのコード

<style>
.ld-stage {
    width: 200px;
    height: 200px;
    text-align: center;
    -webkit-filter: url("#goo");
    filter: url("#goo");
}

.ld, .ld::before, .ld::after {
    display:inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    -webkit-transform-origin: 20px 50px;
    transform-origin: 20px 50px;
    background: #f63;
}
.ld {
    margin: 50px 0 0;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.ld::before, .ld::after {
    content: '';
    position: absolute;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
.ld::after {
    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    background: #f63;
  }
  50% {
    background: #36f;
 }  100% {
    transform: rotate(360deg);
    background: #f63;
 }
}
@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      background: #f63;
    }
    50% {
      background: #36f;
   }  100% {
      -webkit-transform: rotate(360deg);
      background: #f63;
   }
}
</style>

<div class="ld-stage">
    <span class="ld"></span>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
            <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
        </filter>
    </defs>
</svg>

このサイトのページ遷移のときのローダーに使用しようと思っていましたが、Blurフィルターが重いのか、他のアニメーションがカクカクしちゃったのでやめました。
使いどころは要検討です。

SVG

CSS3