簡単にローディング画像を生成できるジェネレーターLoader Generatorのご紹介です。
ローディング画像の種類や大きさ、色やアニメーションのスピードなどの細かい設定ができ、GIF形式で画像をダウンロードしてサイトに設置することができます。
Loader Generator
以下のサイトにアクセスします。Loader Generator – Ajax loader
ローディング画像の選択
まずは以下の7種類のローディングアニメーションの中から、使いたい画像を選択します。Line
Circle
Arrow
Snake
Pulsate
Wifi
Rectangle
ローディング画像のカスタマイズ
今回は「Line」を使ってローディング画像をカスタマイズしてみます。
Settings 覧で以下の設定が可能です。
| Size | ローディング画像の大きさを調整します。 |
|---|---|
| Lines | 回転する線の数を調整します。 |
| Speed | 回転速度を調整します。 |
| Line color | 回転する線の色を選択します。 |
| Background color | ローディング画像の背景色を選択します。 |
| Rounded backgr. | 角丸にするかどうか選択します。 |
ローディング画像の設置例
メニューの中から「Exmaple」をクリックすると、
ローディング画像の設置例も確認することができます。
上記の設置例は、ボタンをクリックしてコンテンツを読み込む際にローディング画像を使うものですが、ページを読み込む際にローディング画面を実装したい場合は、別途jQueryでローディング画面を実装する方法の記事も参考にしてみてください。
コメント