三重県名張市伊賀市のホームページ制作/グラフィックデザイン

Web Studio DeRize(ディーライズ)

BLOG

CSSだけでローダー実装!「CSS Loader」で簡単カスタマイズ

ローディング画面の実装には、jQueryプラグインなどを使用することが多いですが、最近ではCSSだけで簡単に実装できるものがあるんです。ここんとこ私が気に入っているのは「CSS Loader」でーす。

ベーシックだけど、ローダーの種類も豊富で、ちょいとカスタマイズするとオリジナリティを醸し出すことも可能なんです。何と言ってもCSSだけで実装できるのが嬉しいですね。ほんとに最近では、CSSだけのローダーが一般的になりつつあるんです。ちょっと前までは古いブラウザに対応していなかったりしましたが、今はスタンダードになってきてますねー。

CSSだけで実装できて、さらにカスタマイズもできるというのは、かなりポイント高いですね。

CSS Loaderの使い方

基本的には、クラスを追加するだけなんです。デモは下記から。

CSS Loader

見ていただければ分かると思いますが、けっこう色んな種類があるんです。使い方は、「Check it out on GitHub.」をクリックし、GitHubのページの「Code」からZIPをダウンロードしてください。

解凍したファイルの中の「disk」の中のお好きなファイルを選んでください。HTMLの<head>~</head>内にcssを追加します。

<link rel="stylesheet" href="path/to/○○.css">

で、実装するには、ローダーのクラスを追加します。

<div class="loader loader-default is-active"></div>

私は<body>の下に記述してます。loader-defaultを追加することで、ベーシックなローダーが動作します。これはディフォルトのスタンダードなローダーなんですが、「half」とか「inverse」にカスタムしたい場合は…

<div class="loader loader-default is-active" data-half></div>

「data-○○」とするだけです。

他の「Bar」や「Clock」など、もっと他の面白いローダーにしたい場合は、loader-defaultの「default」の部分を変えてやるだけです。

<div class="loader loader-default is-active"></div>

Defaultの他にローダーは…

  • Bar
  • Bar ping pong
  • Border
  • Double
  • Clock
  • Curtain
  • Pokeball
  • Ball
  • Smartphone
  • Bouncin
  • Music

…といった豊富な種類があります。さらにその中にもカスタムできるものは、「data-○○」を加えれば、カスタマイズできるんです。

カスタムテキストも面白い

「Loadig」の文字を自分の好きなテキストに変えらるカスタムもあるんです。これによって、かなりオリジナリティが出せるんですね。私はけっこう気に入ってます。

「Curtain」のカスタムテキストで、サイト名を入れたら、マジでオリジナルローダーになります。こんな感じです…

CSS Loader

コードは下記のようになります。

<div class="loader loader-curtain is-active" data-curtain-text="Custom text"></div>
  • Curtainの場合は「data-curtain-text」
  • Smartphoneの場合は「data-screen」
  • それ以外のカスタムテキストは「data-text」

…と記述します。「Custom text」の所はお好きな文字を入れてください。

このカスタムテキスト、私も実際のWeb制作で使用したことがあるんですが、クライアントさんに喜ばれましたよ。オリジナリティがあるって言って。

ローダーが終わらない…

そうなんです。このままだと、せっかくカッコよくカスタマイズしたローダーが一向に終わらず、ページに移動してくれないんです。なのでローダーを終了させなければいけません。HTMLに下記コードを追加すれば、ローダーが終了して、ちゃんとページを表示してくれるんです。

<script>
	/* ローダー */
	$(function(){
		var loader = $('.loader');
	
		//ページの読み込みが完了したらアニメーションを非表示
		$(window).on('load',function(){
			loader.fadeOut();
		});
	
		//ページの読み込みが完了してなくても3秒後にアニメーションを非表示にする
		setTimeout(function(){
			loader.fadeOut();
		},3000);
	});
</script>

いやーよかったです!というわけで、CSSだけで簡単に実装でき、さらにカスタマイズまでできる便利なローダーをご紹介しました。今後はもっとCSSローダーが主流になってきますので、是非ご活用ください。


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号