• RSS

手軽にローディング画像が作れるジェネレーター「Loader Generator」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

簡単にローディング画像を生成できるジェネレーター「Loader Generator」のご紹介です。
ローディング画像の種類や大きさ、色やアニメーションのスピードなどの細かい設定ができ、GIF形式で画像をダウンロードしてサイトに設置することができます。

Loader Generator

以下のサイトにアクセスします。
手軽にローディング画像が作れるジェネレーター「Loader Generator」


ローディング画像の選択

まずは以下の7種類のローディングアニメーションの中から、使いたい画像を選択します。

Line


Circle


Arrow


Snake


Pulsate


Wifi


Rectangle



ローディング画像のカスタマイズ

今回は「Line」を使ってローディング画像をカスタマイズしてみます。
手軽にローディング画像が作れるジェネレーター「Loader Generator」

Settings 覧で以下の設定が可能です。
Sizeローディング画像の大きさを調整します。
Lines回転する線の数を調整します。
Speed回転速度を調整します。
Line color回転する線の色を選択します。
Background colorローディング画像の背景色を選択します。
Rounded backgr.角丸にするかどうか選択します。
設定内容に問題なければ「DOWNLOAD GIF」ボタンをクリックして、GIF形式のローディング画像をダウンロードします。


ローディング画像の設置例

メニューの中から「Exmaple」をクリックすると、
手軽にローディング画像が作れるジェネレーター「Loader Generator」

ローディング画像の設置例も確認することができます。
手軽にローディング画像が作れるジェネレーター「Loader Generator」

上記の設置例は、ボタンをクリックしてコンテンツを読み込む際にローディング画像を使うものですが、ページを読み込む際にローディング画面を実装したい場合は、別途jQueryでローディング画面を実装する方法の記事も参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.