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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

何かに困った時によく声を掛けてもらえる下駄です。
 

会社を立ち上げてホームページを作っているんですが、制作会社との折り合いがうまく行っておらず、クオリティがいまいちになってしまい、結局そのホームページ制作がダメになってしまった時、声を掛けてもらって、締切がかなり迫っていて、予算も食いつぶしているため、かなりの安値で行わないといけないようなケースや、
 

会社の開発プロジェクトで、技術責任者が仕様設計をなあなあで進めていて、もはや完了デッド期間まで同計算しても終了できないという状態で、声を掛けていただいて、これまでの10倍ぐらいのスピードで開発を完成させるいうような実績を持っているのですが、
 

要するに困った時に声を掛けてお助けする「助っ人マン」という仕事の依頼が多いんですね。
 

本音としては、それって最初から声を掛けてもらえてると、「時間も費用も無駄が少なかったのにな〜〜〜〜。」と思うんですが、失敗して初めて気がつくことって人は大事ですからね・・・
 

そんな風に自分をなだめているんですが、今回は、くるくるloadingアニメを一気にいくつか作ってみたので、ご紹介です。
 

reload.svg

cloud.svg

process.svg

inner-rolling.svg

sync.svg

screw.svg

プレビュー

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

あとがき

今回も、Icon-free素材集からピックアップして、比較的実際に使えそうなものを作成してみました。
 

どれも、似たようなアニメーション方式にしているので、他への流用もしやすいと思いますよ。
 

でも、中には、svgのフリー素材で、センタリングがしっかりされていないモノもあり、中心点を探すのが結構めんどくさいものもあるので、svg編集ツールの「Incscape」などを使いこなせるようになっておくと便利ですね。
 

ちなみに、今回紹介した6個を作成するのにかかった時間は、40分でした。
 

我ながら「ハヤ!!」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です