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


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

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

ここでは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の方がシンプルにまとまっていて
使いやすそうな印象です(‘-‘*)


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

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

Message

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

flower