Loading Gif画像をカスタマイズできるサイトの紹介

Gif画像
2014/02/13

ローディング画像について

概要

ローディング画像とは、簡単に説明すると「読込中ですよ」と閲覧者に伝えるための画像です。
こんなのです↓↓↓

loading

今回はこのような画像を簡単に生成できる、しかも自分好みにカスタマイズできちゃう便利なサイトを紹介します。

必要性

皆さんは読込に時間がかかるサイトを見ているとイライラしませんか?
私はとてもイライラしますw

私のPCが固まってるのか、正しくサイトにアクセスできていないのか、ネットワークが遅いのかなど考えてしまいますね。。。
Web業界では3秒ルールというものがあり、サイトの表示に3秒以上かかるとほとんどのユーザーが見るのを辞めてしまうんです。

しかし、どうしても3秒以上かかってしまう処理はありますよね?
そういった時に少しでもストレスを軽減するために、ローディング画像を表示して、「あなたのPCは固まってない」、「現在読込中だから時間がかかるんだよ」ということを知らせてあげるのです。

ファイルのアップロード時にプログレスバーを表示するのと同じようなことです。
プログレスバーの実装方法はこちら↓
PHP 読込やアップロード状況を確認するプログレスバーを実装

サイト一覧

Loader Generator

loadergenerator

シンプルでとても簡単にGif画像が作れちゃいます。

Loader Generatorでは下記をカスタマイズできます。
- サイズ
- ラインの数
- 回転スピード
- ラインの色
- 背景色

Preloaders.net

preloaders

こちらのサイトもシンプルで使いやすいですね~。
普通のローディング画像だけでなく、カメラや国旗マークもつくれちゃいます。

サイズ、色、背景色、スピードなどなど自由にカスタマイズできます。

Chimply

chimply

選択できるローディング画像の種類が豊富!
サイズ、色、背景色などがカスタマイズできます。

自分が作った画像を保存しておき、次回サイトにアクセスしたときにその画像を呼び出すこともできます。
さらに他の人が作ったものも見ることができます。

このサイトの表示にもローディング画像が使われてますね。

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

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る