定番
履歴

SVG 読み込みアニメ

SVG 読み込みアニメ

SVGでローディングのアニメーションのサンプルを紹介します。通常の画像に比べて非常に軽量なので読み込みが早く、また自由な表現ができるので、待ち時間のアイキャッチに最適です。

<svg width="50" height="50" >
    <circle cx="10" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="40" dur="0.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="10" to="40" dur="0.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="10" dur="0.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="40" to="10" dur="0.5s" repeatCount="indefinite"/>
    </circle>
</svg>
<svg width="50" height="50" >
    <circle cx="10" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>

    <circle cx="25" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="25" to="40" dur="1s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="10" to="25" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="25" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="25" dur="1s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="25" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="25" to="10" dur="1s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="40" to="25" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="25" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="25" dur="1s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>
</svg>
<svg width="50" height="50" >
    <circle cx="10" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>

    <circle cx="25" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="25" to="40" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="10" to="25" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="25" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="25" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="40" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="25" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="25" to="10" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="40" to="25" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="25" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="25" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="10" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>
<svg width="50" height="50" >
    <circle cx="10" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="10" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="10" to="40" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cx" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="40" r="5" fill="red" stroke="red">
        <animate attributeName="cy" from="40" to="10" dur="1s" repeatCount="indefinite"/>
    </circle>

    <circle cx="25" cy="10" r="5" fill="#FFFFFF" stroke="#FFFFFF">
        <animate attributeName="cx" from="25" to="40" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="10" to="25" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="40" cy="25" r="5" fill="#FFFFFF" stroke="#FFFFFF">
        <animate attributeName="cx" from="40" to="25" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="40" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="25" cy="40" r="5" fill="#FFFFFF" stroke="#FFFFFF">
        <animate attributeName="cx" from="25" to="10" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="40" to="25" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx="10" cy="25" r="5" fill="#FFFFFF" stroke="#FFFFFF">
        <animate attributeName="cx" from="10" to="25" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" from="25" to="10" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>
2016-03-15 13:26:20
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top