とりあえず、SVGでよくあるローダーを作ってみたわ
とりあえず、SVGでよくあるローダーを作ってみたわ。
コードはこんな感じ。
SVGはベクターだからどんなに拡大しても画質が劣化しないし、エディターでアニメーション具合やグラフィックの見た目を変更できるのがサイコーだ。
これからもバンバン使ってゆきたいっ!
コードはこんな感じ。
<svg version="1.1" id="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <style type="text/css"> circle { fill:#0054C1; } </style> <g id="circles"> <circle opacity="1.0" cx="49.5" cy="10" r="8"> <animate attributeName="opacity" begin="0s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.12" cx="69.73" cy="15.256" r="8"> <animate attributeName="opacity" begin="0.12s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.2" cx="84.57" cy="29.589" r="8"> <animate attributeName="opacity" begin="0.2s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.28" cx="90" cy="49.5" r="8"> <animate attributeName="opacity" begin="0.28s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.36" cx="84.57" cy="70.186" r="8"> <animate attributeName="opacity" begin="0.36s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.44" cx="69.73" cy="84.576" r="8"> <animate attributeName="opacity" begin="0.44s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.52" cx="49.5" cy="90" r="8"> <animate attributeName="opacity" begin="0.52s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.6" cx="29.601" cy="84.576" r="8"> <animate attributeName="opacity" begin="0.6s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.68" cx="15.183" cy="69.652" r="8"> <animate attributeName="opacity" begin="0.68s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.76" cx="10" cy="49.501" r="8"> <animate attributeName="opacity" begin="0.76s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.84" cx="15.183" cy="30.32" r="8"> <animate attributeName="opacity" begin="0.84s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> <circle opacity="0.92" cx="29.602" cy="15.649" r="8"> <animate attributeName="opacity" begin="0.92s" dur="1s" from="1" to="0" repeatCount="indefinite"/> </circle> </g> </svg>
SVGはベクターだからどんなに拡大しても画質が劣化しないし、エディターでアニメーション具合やグラフィックの見た目を変更できるのがサイコーだ。
これからもバンバン使ってゆきたいっ!
コメント
コメントを投稿