geta1972TweetPocketCheckこんにちわ。キレイ好きを公言しているのに、仕事机の周りがグッチャグチャになっている下駄です。世の中で最も嫌われがちな血液型B型・・・そんな事はどーでもいいんですけどね。今日も嫁が片付けてくれて有り難い限りです。svgのloadingアニメ素材も回数をこなして来て、こなれてきましたが、今回はもっと簡単にこうした素材が作れないかという意見を友達からもらったので、最も簡単に作れそうなやり方をご紹介します。簡単な素材の作り方loadingアニメは、どんな素材でもいいので、グルグル回ってさえいれば、それっぽく見えます。無料svg素材サイト(pngでもいいんですが)で素材をダウンロードして、その素材をぐるぐる回せばいいだけなんですね。僕がよく利用するアイコン素材サイトで2つほど作ってみました。https://www.flaticon.com/こちらから、適当にタイプの違う2つほどの素材をDLして作ってみました。CodePen.解説svg素材をDLしたらその中にstyleタグを追加して、素材内の要素にanimationをセットするだけなんですが、少しだけ難しいポイントは、回転する中心点をtransfom-originで指定する際の座標の見極め方です。1番目の矢印も、上下左右の対象画像ではないので、画像自体のサイズの中心点にすると、ズレが生じます。手打ちで微調整してもいいのですが、小数点以下の値が必要である場合が多いので、できればsvgの座標が取得できるinkspadeなどの編集アプリで座標を抽出して、若干の計算を行って算出するのが良さそうですね。使うtぽサイズの半分で中心点を取得することも用意ですよ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。