ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は
ジェネレーターで簡単に作成することができます。

ローディング・読み込み中の画像を簡単に作成できるツール

ここでは2種類のジェネレーターを紹介します。

Preloaders

Preloadersはこちらから

ローディング・読み込み中の画像を簡単に作成できるツール

項目の意味はそれぞれ以下の通りです。

Select your preloader ローディング画像のデザイン
Image type 画像の形式(標準は「GIF」でOK)
Transparent background 背景を透明にする場合は「Yes」
Foreground color 画像の色
Background color 画像の背景色
Animation speed アニメーションの速さ
Preloader size (px) 画像の大きさ
Keep original colors デフォルトの色を使う場合は「Yes」

画像を作成したら「Gecerate preloader」をクリックします。

右側に作成した画像が表示されます。
ローディング・読み込み中の画像を簡単に作成できるツール

「Download Now」をクリックすると画像をダウンロードできます。

Loader Generator

Loader Generatorはこちらから

ローディング・読み込み中の画像を簡単に作成できるツール

イメージの種類は以下の通りです。

Line ローディング画像
Circle ローディング画像
Arrow ローディング画像
Snake ローディング画像
Pulsate ローディング画像
Wifi ローディング画像
Rectangle ローディング画像

こちらのジェネレーターはリアルタイムでイメージを確認できるので
作成しやすいと思います。

画像を作成したら「DOWNLOAD GIF」をクリックします。
ローディング・読み込み中の画像を簡単に作成できるツール

このように表示されるので画像をクリックして別窓を開きます。
別窓で表示された画像を右クリックで保存します。
ローディング・読み込み中の画像を簡単に作成できるツール

あとがき!

ページの読み込みや遷移に時間が掛かる場合は
ローディング画像を使用するとプロっぽいですね!

GIF画像を自分で作成すると面倒なので(作りませんがw)
このようなジェネレーターがあると便利です。

先に紹介したPreloadersは画像を見ながら作成はできませんが
透明背景の指定ができるのでどんなサイトにも使えそうです。

でもデザインはLoader Generatorの方がシンプルにまとまっていて
使いやすそうな印象です(‘-’*)

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

こんな記事も書きました!