SVGでローディングのアニメーションのサンプルを紹介します。
通常の画像に比べて非常に軽量なので読み込みが早く、また自由な表現ができるので、待ち時間のアイキャッチに最適です。
４つでくるくる
<svg width="50" height="50">
<circle cx="25.0654" cy="10" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="40" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle cx="40" cy="25.0654" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="10" to="40" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle cx="24.9346" cy="40" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="10" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle cx="10" cy="24.9346" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="40" to="10" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
</svg>
８こでくるくる
<svg width="50" height="50">
<circle cx="17.5327" cy="10" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="40" cy="17.5327" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="32.4673" cy="40" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="10" cy="32.4673" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="28.7663" cy="13.7663" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="25" to="40" dur="1s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="10" to="25" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="36.2337" cy="28.7663" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="25" dur="1s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="21.2337" cy="36.2337" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="25" to="10" dur="1s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="40" to="25" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="13.7663" cy="21.2337" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="25" dur="1s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
</svg>
４つのスピードを変えただけ
<svg width="50" height="50">
<circle cx="17.5327" cy="10" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="40" cy="17.5327" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="32.4673" cy="40" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="10" cy="32.4673" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="26.8832" cy="11.8832" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="25" to="40" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="10" to="25" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="38.1168" cy="26.8832" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="25" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="40" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="23.1168" cy="38.1168" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="25" to="10" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="40" to="25" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="11.8832" cy="23.1168" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="25" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="10" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
内の４つを白くしただけ
<svg width="50" height="50">
<circle cx="17.5327" cy="10" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="40" cy="17.5327" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="32.4673" cy="40" r="5" fill="red" stroke="red">
<animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="10" cy="32.4673" r="5" fill="red" stroke="red">
<animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"></animate>
</circle>
<circle cx="26.8832" cy="11.8832" r="5" fill="#FFFFFF" stroke="#FFFFFF">
<animate attributeName="cx" from="25" to="40" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="10" to="25" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="38.1168" cy="26.8832" r="5" fill="#FFFFFF" stroke="#FFFFFF">
<animate attributeName="cx" from="40" to="25" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="40" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="23.1168" cy="38.1168" r="5" fill="#FFFFFF" stroke="#FFFFFF">
<animate attributeName="cx" from="25" to="10" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="40" to="25" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="11.8832" cy="23.1168" r="5" fill="#FFFFFF" stroke="#FFFFFF">
<animate attributeName="cx" from="10" to="25" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="25" to="10" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
回っているようで実は一つ一つの動きは直線運動をしています。
円をいろいろな数や動きや色にするだけで、それっぽいアニメーションができるので、数値を変えて遊んでみましょう。
