[SVG] loadingアニメーション # 回転系6種

何かに困った時によく声を掛けてもらえる、ユゲタです。 会社を立ち上げてホームページを作っているんですが、制作会社との折り合いがうまく行っておらず、クオリティがいまいちになってしまい、結局そのホームページ制作がダメになってしまった時、声を掛けてもらって、締切がかなり迫っていて、予算も食いつぶしているため、かなりの安値で行わないといけないようなケースや、 会社の開発プロジェクトで、技術責任者が仕様設計をなあなあで進めていて、もはや完了デッド期間まで同計算しても終了できないという状態で、声を掛けていただいて、これまでの10倍ぐらいのスピードで開発を完成させるいうような実績を持っているのですが、 要するに困った時に声を掛けてお助けする「助っ人マン」という仕事の依頼が多いんですね。 本音としては、それって最初から声を掛けてもらえてると、「時間も費用も無駄が少なかったのにな〜〜〜〜。」と思うんですが、失敗して初めて気がつくことって人は大事ですからね・・・ そんな風に自分をなだめているんですが、今回は、くるくるloadingアニメを一気にいくつか作ってみたので、ご紹介です。

reload.svg

<svg class="reload" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.398 254.398" > <style> .reload .arrow{ transform-origin:127.199px 127.199px; animation: reload-roll 1s linear infinite; } @keyframes reload-roll { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } </style> <path class="arrow" d="M254.398,82.007l-28.133,62.972l-62.972-28.134l29.508-11.284c-9.065-26.295-34.042-45.245-63.377-45.245 c-28.157,0-53.501,17.781-63.065,44.246L32.284,92.248c14.732-40.772,53.771-68.166,97.141-68.166 c44.758,0,82.949,28.625,97.246,68.527L254.398,82.007z M124.974,230.316c43.371,0,82.409-27.394,97.141-68.167l-34.076-12.313 c-9.563,26.465-34.906,44.246-63.064,44.246c-29.335,0-54.312-18.95-63.377-45.245l29.508-11.284L28.133,109.42L0,172.392 l27.728-10.603C42.024,201.691,80.216,230.316,124.974,230.316z"/> </svg>

cloud.svg

<svg class="cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.614 60.615"> <style> .cloud .inner{ transform-origin:30.307px 32.37px; animation: cloud-roll 1s linear infinite; } @keyframes cloud-roll { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } </style> <path class="frame" d="M50.752,47.941H13.72C6.155,47.941,0,41.787,0,34.221C0,26.656,6.154,20.5,13.72,20.5c1.233,0,2.466,0.171,3.673,0.511 c2.143-5.025,7.094-8.338,12.611-8.338c3.961,0,7.659,1.68,10.27,4.637c1.212-0.511,2.521-0.779,3.834-0.779 c5.438,0,9.861,4.424,9.861,9.862c0,0.763-0.092,1.524-0.271,2.275c4.065,1.271,6.916,5.067,6.916,9.411 C60.614,43.517,56.189,47.941,50.752,47.941z M13.72,22.5C7.258,22.5,2,27.758,2,34.221c0,6.462,5.258,11.72,11.72,11.72h37.032 c4.335,0,7.861-3.526,7.861-7.861c0-3.758-2.676-7.003-6.362-7.715c-0.286-0.057-0.534-0.233-0.679-0.487 S51.4,29.319,51.5,29.044c0.311-0.868,0.469-1.759,0.469-2.65c0-4.335-3.527-7.862-7.861-7.862c-1.279,0-2.506,0.302-3.643,0.898 c-0.428,0.224-0.953,0.111-1.25-0.268c-2.244-2.853-5.602-4.489-9.211-4.489c-4.992,0-9.441,3.176-11.072,7.902 c-0.086,0.252-0.271,0.459-0.512,0.575c-0.24,0.115-0.518,0.131-0.77,0.041C16.366,22.732,15.042,22.5,13.72,22.5z"/> <path class="inner" d="M38.557,31.357c-0.553,0-1,0.448-1,1c0,3.998-3.252,7.25-7.25,7.25c-3.998,0-7.25-3.252-7.25-7.25 c0-3.927,3.141-7.127,7.042-7.238v1.531c0,0.377,0.212,0.723,0.55,0.893c0.143,0.072,0.297,0.107,0.45,0.107 c0.21,0,0.419-0.066,0.594-0.195l3.5-2.583c0.258-0.19,0.408-0.492,0.406-0.812c-0.004-0.32-0.158-0.62-0.42-0.806l-3.5-2.5 c-0.305-0.217-0.705-0.246-1.039-0.075c-0.332,0.172-0.542,0.515-0.542,0.889v1.552c-5.004,0.112-9.042,4.209-9.042,9.239 c0,5.101,4.149,9.25,9.25,9.25s9.25-4.149,9.25-9.25C39.557,31.805,39.11,31.357,38.557,31.357z"/> </svg>

process.svg

<svg class="process" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.389 399.389"> <style> svg.process .donut{ transform-origin : 199.6945px 199.6945px; animation : process-roll 0.7s linear infinite; } @keyframes process-roll { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } </style> <path class="donut" d="M340.896,58.489C303.18,20.773,253.031,0.001,199.693,0.001c-53.34,0-103.487,20.771-141.204,58.488 C20.772,96.207,0,146.355,0,199.694c0,53.34,20.772,103.489,58.49,141.206c37.717,37.717,87.864,58.488,141.204,58.488 c53.339,0,103.486-20.771,141.205-58.488c37.717-37.717,58.49-87.865,58.49-141.206C399.387,146.355,378.613,96.207,340.896,58.489 z M328.061,71.326c34.289,34.289,53.172,79.878,53.172,128.368h-41.148c0-77.412-62.979-140.391-140.391-140.391 c-4.593,0-9.134,0.229-13.615,0.662v-41.31c4.508-0.332,9.049-0.5,13.615-0.5C248.184,18.155,293.771,37.038,328.061,71.326z M199.693,321.931c-67.401,0-122.236-54.835-122.236-122.236S132.292,77.458,199.693,77.458S321.93,132.293,321.93,199.694 S267.094,321.931,199.693,321.931z"/> </svg>

inner-rolling.svg

<svg class="inner-rolling" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294.843 294.843"> <style> .inner-rolling .inner{ transform-origin:147.4215px 147.4215px; animation: inner-rolling 1s linear infinite; } @keyframes inner-rolling { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } </style> <path d="M147.421,0c-3.313,0-6,2.687-6,6s2.687,6,6,6c74.671,0,135.421,60.75,135.421,135.421s-60.75,135.421-135.421,135.421 S12,222.093,12,147.421c0-50.804,28.042-96.902,73.183-120.305c2.942-1.525,4.09-5.146,2.565-8.088 c-1.525-2.942-5.147-4.09-8.088-2.565C30.524,41.937,0,92.118,0,147.421c0,81.289,66.133,147.421,147.421,147.421 s147.421-66.133,147.421-147.421S228.71,0,147.421,0z"/> <path class="inner" d="M205.213,71.476c-16.726-12.747-36.71-19.484-57.792-19.484c-52.62,0-95.43,42.81-95.43,95.43s42.81,95.43,95.43,95.43 c25.49,0,49.455-9.926,67.479-27.951c2.343-2.343,2.343-6.142,0-8.485c-2.343-2.343-6.143-2.343-8.485,0 c-15.758,15.758-36.709,24.436-58.994,24.436c-46.003,0-83.43-37.426-83.43-83.43s37.426-83.43,83.43-83.43 c36.894,0,69.843,24.715,80.126,60.104c0.924,3.182,4.253,5.011,7.436,4.087c3.182-0.925,5.012-4.254,4.087-7.436 C233.422,101.308,221.398,83.809,205.213,71.476z"/> <path class="inner" d="M217.773,129.262c-2.344-2.343-6.143-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485l22.57,22.571 c1.125,1.125,2.651,1.757,4.243,1.757s3.118-0.632,4.243-1.757l22.57-22.571c2.343-2.343,2.343-6.142,0-8.485 c-2.344-2.343-6.143-2.343-8.485,0l-18.328,18.328L217.773,129.262z"/> </svg>

sync.svg

<svg class="sync" viewBox="0 -1 459.085 459" xmlns="http://www.w3.org/2000/svg"> <style> .sync .arrow{ transform-origin:229.5425px 229.5px; animation: roll 1.2s linear infinite; } @keyframes roll { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } </style> <path class="arrow" d="m228.070312 14.042969c37.671876 0 75.382813 10.679687 109.0625 30.886719 24.363282 14.640624 45.855469 33.589843 63.433594 55.925781l-65.421875-2.160157c-2.511719-.101562-4.886719 1.152344-6.21875 3.28125-1.332031 2.132813-1.421875 4.8125-.230469 7.027344 1.1875 2.214844 3.476563 3.621094 5.988282 3.683594l77.117187 2.542969c2.722657 1.484375 6.101563.992187 8.292969-1.203125 2.191406-2.195313 2.679688-5.570313 1.195312-8.296875l-2.546874-77.105469c-.152344-3.839844-3.378907-6.835938-7.222657-6.710938s-6.863281 3.328126-6.765625 7.171876l1.878906 57c-17.699218-21.027344-38.746093-38.988282-62.292968-53.160157-35.859375-21.511719-76.0625-32.8828122-116.269532-32.8828122-64.242187 0-123.464843 26.4921872-166.757812 74.5898432-19.332031 21.578126-34.707031 46.398438-45.414062 73.320313-10.398438 26.285156-15.898438 54-15.898438 80.167969 0 3.863281 3.132812 7 7 7s7-3.136719 7-7c0-50.082032 21.578125-103.957032 57.722656-144.121094 40.597656-45.113281 96.121094-69.957031 156.347656-69.957031zm0 0"/> <path class="arrow" d="m452.089844 221.117188c-3.863282 0-7 3.132812-7 7 0 50.082031-21.578125 103.957031-57.722656 144.117187-40.597657 45.113281-96.128907 69.957031-156.351563 69.957031-37.667969 0-75.382813-10.679687-109.0625-30.886718-24.359375-14.640626-45.855469-33.589844-63.429687-55.925782l65.421874 2.160156c3.867188.125 7.101563-2.902343 7.230469-6.765624.125-3.863282-2.902343-7.101563-6.769531-7.226563l-77.113281-2.542969c-2.726563-1.484375-6.101563-.992187-8.296875 1.203125-2.191406 2.195313-2.679688 5.570313-1.191406 8.296875l2.539062 77.105469c.0625 2.511719 1.46875 4.796875 3.683594 5.988281 2.214844 1.1875 4.894531 1.101563 7.027344-.234375 2.128906-1.332031 3.382812-3.707031 3.28125-6.214843l-1.878907-57c17.695313 21.027343 38.742188 38.988281 62.292969 53.160156 35.851562 21.511718 76.058594 32.882812 116.261719 32.882812 64.246093 0 123.46875-26.488281 166.757812-74.589844 19.335938-21.578124 34.710938-46.398437 45.414063-73.316406 10.402344-26.285156 15.902344-54 15.902344-80.167968 0-3.863282-3.132813-6.996094-6.996094-7zm0 0"/> <path d="m286.054688 116.667969h-45.101563c-.066406 0-.132813-.03125-.179687-.082031l-19.730469-21.578126c-6.820313-7.449218-16.449219-11.691406-26.546875-11.703124h-64.984375c-19.855469.023437-35.945313 16.113281-35.96875 35.96875v169.867187c.023437 19.855469 16.113281 35.945313 35.96875 35.96875h192.066406c19.855469-.023437 35.941406-16.113281 35.964844-35.96875v-101.640625c-.019531-19.691406-15.851563-35.710938-35.539063-35.964844-.617187-19.417968-16.523437-34.847656-35.949218-34.867187zm-131.527344 172.472656c-.011719 12.128906-9.839844 21.957031-21.964844 21.96875h-3.050781c-12.128907-.011719-21.953125-9.839844-21.96875-21.96875v-169.867187c.015625-12.128907 9.839843-21.957032 21.96875-21.96875h64.984375c6.167968.007812 12.050781 2.597656 16.21875 7.148437l19.730468 21.582031c2.699219 2.945313 6.511719 4.628906 10.511719 4.632813h45.097657c11.699218.011719 21.339843 9.179687 21.941406 20.863281h-117.5c-19.855469.023438-35.945313 16.113281-35.96875 35.96875zm189.015625-101.640625v101.640625c-.011719 12.128906-9.839844 21.957031-21.964844 21.96875h-160.554687c4.871093-6.285156 7.507812-14.015625 7.5-21.96875v-101.640625c.011718-12.128906 9.839843-21.957031 21.96875-21.96875h131.085937c12.125.011719 21.953125 9.839844 21.964844 21.96875zm0 0"/> </svg>

screw.svg

<svg class="screw" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <style> svg.screw path{ transform-origin:256px 256px; animation: roll 1.2s linear infinite; } @keyframes roll { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} } </style> <path d="M256,512c68.38,0,132.667-26.629,181.019-74.98C485.371,388.667,512,324.38,512,256s-26.629-132.667-74.98-181.019 C388.667,26.629,324.38,0,256,0S123.333,26.629,74.981,74.98C26.629,123.333,0,187.62,0,256s26.629,132.667,74.98,181.019 C123.333,485.371,187.62,512,256,512z M80.244,398.099c9.045,1.193,19.287,2.038,30.205,2.038c25.026,0,53.566-4.426,79.128-19.185 c41.123-23.742,62.928-67.512,73.24-95.657C278.993,304.947,301,338.562,301,376c0,50.464-40.401,94.363-51.955,105.883 c-57.76-1.734-111.809-25.035-152.851-66.078C90.533,410.145,85.22,404.229,80.244,398.099z M415.806,415.806 c-34.278,34.278-77.632,56.176-124.641,63.477C309.461,455.459,331,418.41,331,376c0-47.485-27.003-88.253-46.221-111.257 c25.107-4.182,65.222-6.433,97.644,12.286c43.803,25.29,61.602,82.427,65.748,98.04C439.085,389.671,428.27,403.342,415.806,415.806 z M466.998,337.302c-11.473-27.77-32.797-65.02-69.576-86.253c-41.096-23.727-89.868-20.745-119.404-15.609 c8.985-23.872,27.138-59.781,59.404-78.41c43.845-25.314,102.294-12.11,117.823-7.908C472.72,181.596,482,218.084,482,256 C482,284.249,476.851,311.707,466.998,337.302z M431.755,113.9c-29.779-3.929-72.617-4.05-109.332,17.148 c-41.123,23.742-62.928,67.511-73.24,95.657C233.007,207.053,211,173.439,211,136c0-50.464,40.401-94.364,51.955-105.884 c57.76,1.735,111.809,25.036,152.851,66.078C421.467,101.855,426.779,107.77,431.755,113.9z M96.194,96.194 c34.278-34.278,77.632-56.176,124.641-63.477C202.539,56.541,181,93.59,181,136c0,47.485,27.003,88.253,46.221,111.257 c-25.107,4.182-65.222,6.433-97.644-12.286c-43.803-25.29-61.602-82.427-65.748-98.04C72.915,122.328,83.73,108.658,96.194,96.194z M45.002,174.698c11.473,27.769,32.797,65.019,69.576,86.253c25.566,14.761,54.099,19.185,79.128,19.185 c15.209,0,29.112-1.636,40.277-3.578c-8.984,23.872-27.138,59.783-59.405,78.413c-43.846,25.313-102.294,12.11-117.823,7.908 C39.28,330.404,30,293.916,30,256C30,227.751,35.149,200.294,45.002,174.698z"/> </svg>

プレビュー

See the Pen svg-loading rolling2 by YugetaKoji (@geta1972) on CodePen.

あとがき

今回も、Icon-free素材集からピックアップして、比較的実際に使えそうなものを作成してみました。 どれも、似たようなアニメーション方式にしているので、他への流用もしやすいと思いますよ。 でも、中には、svgのフリー素材で、センタリングがしっかりされていないモノもあり、中心点を探すのが結構めんどくさいものもあるので、svg編集ツールの「Incscape」などを使いこなせるようになっておくと便利ですね。 ちなみに、今回紹介した6個を作成するのにかかった時間は、40分でした。 我ながら「ハヤ！！」

関連リンク

他のNowLoadingも見る