用途
新着
履歴
分類

SVG 読み込みアニメ

SVG 読み込みアニメ

SVGでローディングのアニメーションのサンプルを紹介します。

通常の画像に比べて非常に軽量なので読み込みが早く、また自由な表現ができるので、待ち時間のアイキャッチに最適です。

4つでくるくる

<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>

8こでくるくる

<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>

4つのスピードを変えただけ

<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>

内の4つを白くしただけ


<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>

回っているようで実は一つ一つの動きは直線運動をしています。

円をいろいろな数や動きや色にするだけで、それっぽいアニメーションができるので、数値を変えて遊んでみましょう。

公開 2019-08-06 23:35:28
このページの二次元コード
SVG 読み込みアニメ

人気のサンプル

search -  category -  about
© 2024 kipure
Top