[SVG] loadingアニメーション #くるくる系2

自宅で乗っている車の17年目の車検を行った、ユゲタです。 17年乗っているけど車の走行メーターは5万キロをちょっと超えたぐらい。 最近は、毎日スポジムに行く往復10キロぐらい乗っていますが、リーマン時代は週末に近所のスーパーに行く（往復5キロ程度）ぐらいしか乗っていなかったので、ペパドラ寸前でしたね。 野ざらし車庫なんで、車のボディもボロボロになってきたんですが、まだまだ可愛がってやろうと思います。 先日メーカーから、「交換パーツがだんだん無くなってきてますよ。」と早く買い換えろメッセージをいただきましたが、そんなことには負けません！！！ そして、今回のloadingアニメ素材は、素材をくるくる回すだけの比較的スタンダード系を２つです。

ソース

<svg class="double-roll" viewBox="-50 -50 612 612" xmlns="http://www.w3.org/2000/svg"> <style> svg.double-roll .roll-1{ transform-origin:256px 256px; animation : anim-roll-1 2.0s linear infinite; } @keyframes anim-roll-1 { 00.0% {transform : rotate(0deg);} 100.0% {transform : rotate(360deg);} } svg.double-roll .roll-2{ transform-origin:256px 256px; animation : anim-roll-2 2.0s linear infinite; } @keyframes anim-roll-2 { 00.0% {transform : rotate(0deg);} 100.0% {transform : rotate(360deg);} } </style> <g class="roll-1"> <path d="m256 512c-141.164062 0-256-114.835938-256-256s114.835938-256 256-256c101.867188 0 185.921875 60.800781 243.070312 175.765625 2.625 5.269531.472657 11.691406-4.796874 14.3125-5.292969 2.605469-11.691407.449219-14.292969-4.820313-37.1875-74.773437-106.199219-163.925781-223.980469-163.925781-129.386719 0-234.667969 105.28125-234.667969 234.667969s105.28125 234.667969 234.667969 234.667969 234.667969-105.28125 234.667969-234.667969c0-5.886719 4.777343-10.667969 10.664062-10.667969 5.890625 0 10.667969 4.78125 10.667969 10.667969 0 141.164062-114.835938 256-256 256zm0 0"/> <path d="m501.332031 192h-85.332031c-5.886719 0-10.667969-4.777344-10.667969-10.667969 0-5.886719 4.78125-10.664062 10.667969-10.664062h74.667969v-73.773438c0-5.886719 4.777343-10.664062 10.664062-10.664062 5.890625 0 10.667969 4.777343 10.667969 10.664062v84.4375c0 5.890625-4.777344 10.667969-10.667969 10.667969zm0 0"/> </g> <g class="roll-2"> <path d="m256 405.332031c-51.050781 0-98.046875-25.769531-125.695312-68.90625-3.179688-4.949219-1.75-11.5625 3.21875-14.71875 4.972656-3.199219 11.566406-1.75 14.742187 3.222657 23.703125 36.992187 63.980469 59.070312 107.734375 59.070312 70.59375 0 128-57.40625 128-128s-57.40625-128-128-128-128 57.40625-128 128c0 3.308594.257812 6.550781.511719 9.792969l-21.269531 1.683593c-.296876-3.859374-.574219-7.613281-.574219-11.476562 0-82.324219 66.984375-149.332031 149.332031-149.332031s149.332031 67.007812 149.332031 149.332031-66.984375 149.332031-149.332031 149.332031zm0 0"/> <path d="m138.667969 405.332031c-5.890625 0-10.667969-4.777343-10.667969-10.664062v-64c0-5.890625 4.777344-10.667969 10.667969-10.667969h64c5.886719 0 10.664062 4.777344 10.664062 10.667969 0 5.886719-4.777343 10.664062-10.664062 10.664062h-53.335938v53.335938c0 5.886719-4.777343 10.664062-10.664062 10.664062zm0 0"/> </g> </svg> <svg class="short-bar" xmlns="http://www.w3.org/2000/svg" viewBox="0 7.5 330 337.5"> <style> svg.short-bar .bars{ fill : black; transform-origin:165px 172.5px; animation : anim-cycle4 0.7s linear infinite; } @keyframes anim-cycle4 { 00.0% {transform : rotate(0deg);} 12.49% {transform : rotate(0deg);} 12.5% {transform : rotate(45deg);} 24.99% {transform : rotate(45deg);} 25.0% {transform : rotate(90deg);} 37.49% {transform : rotate(90deg);} 37.5% {transform : rotate(135deg);} 49.99% {transform : rotate(135deg);} 50.0% {transform : rotate(180deg);} 62.49% {transform : rotate(180deg);} 62.5% {transform : rotate(225deg);} 74.99% {transform : rotate(225deg);} 75.0% {transform : rotate(270deg);} 87.49% {transform : rotate(270deg);} 87.5% {transform : rotate(315deg);} 99.99% {transform : rotate(315deg);} 100.0% {transform : rotate(0deg);} } </style> <g class="bars"> <path d="M165,7.5c-8.284,0-15,6.716-15,15v60c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-60 C180,14.216,173.284,7.5,165,7.5z"/> <path d="M165,262.5c-8.284,0-15,6.716-15,15v30c0,8.284,6.716,15,15,15c8.284,0,15-6.716,15-15v-30 C180,269.216,173.284,262.5,165,262.5z"/> <path d="M315,157.5h-60c-8.284,0-15,6.716-15,15s6.716,15,15,15h60c8.284,0,15-6.716,15-15S323.284,157.5,315,157.5 z"/> <path d="M90,172.5c0-8.284-6.716-15-15-15H15c-8.284,0-15,6.716-15,15s6.716,15,15,15h60 C83.284,187.5,90,180.784,90,172.5z"/> <path d="M281.673,55.827c-5.857-5.858-15.355-5.858-21.213,0l-42.427,42.427c-5.858,5.858-5.858,15.355,0,21.213 c2.929,2.929,6.768,4.394,10.606,4.394c3.839,0,7.678-1.464,10.607-4.394l42.427-42.427 C287.531,71.182,287.531,61.685,281.673,55.827z"/> <path d="M90.753,225.533L48.328,267.96c-5.857,5.858-5.857,15.355,0,21.213c2.929,2.929,6.768,4.393,10.607,4.393 c3.839,0,7.678-1.464,10.607-4.393l42.426-42.427c5.857-5.858,5.857-15.355,0-21.213 C106.109,219.675,96.612,219.675,90.753,225.533z"/> <path d="M69.541,55.827c-5.858-5.858-15.355-5.857-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l42.426,42.427 c2.93,2.929,6.768,4.394,10.607,4.394c3.838,0,7.678-1.465,10.606-4.393c5.858-5.858,5.858-15.355,0-21.213L69.541,55.827z"/> </g> </svg>

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

解説

「矢印ぐるぐるアニメの2重構造」と「短いバーがくるくる回転する系」の2種類ですが、どちらもtransform-rotateで動かしています。 short-barの方は、普通にrotateしてしまうと、なめらかに回転してしまうので、0.01ぐらいのタイミングでわざとカクカクするアニメにしています。 cubic-bezierを使って、シンプルなkeyframeにできないかあーだこーだしてみましたが、無理でしたね。 cssアニメでこうした動きをする際は、view< - >hiddenで行ったほうがいいのかもしれません。 ただ、汎用的に使えなそうなので、rotateで行っておきました。 2重ループの矢印アニメは、内側を逆向きに回しても面白い効果がでるかもしれませんね。 こうしたアイコン素材にアニメーションを付けていく作業、意外と面白くて最近ハマっています。 毎日作り上げていったら結構いいライブラリが作れるかもしれませんね。

関連リンク

他のNowLoadingも見る