CSS Loaderは、クラスを追加するだけでCSSのみで作られたローダーを実装することができるライブラリです。
デモはこちらのページで確認することができます。
CSS Loaderの使い方
GitHubからファイルをダウンロードし、distフォルダに入っているcss-loader.cssをサーバーにアップロードします。
HTMLの<head>～</head>内に以下を追加して、css-loader.cssを読み込みます。
1 | <link rel="stylesheet" href="path/to/css-loader.css"> |
ローダーの実装は、以下のように使いたいローダーのクラスを付与してください。is-activeクラスを外すと、ローダーが非アクティブになります。
1 | <div class="loader loader-default is-active"></div> |
利用できるクラスの種類は以下の通りです。上記「loader-default」のdefaultの部分をdoubleやbarに変更すると、ローダーも変わります。
- default
- double
- bar
- border
- ball
- smartphone
- clock
- curtain
- music
ローダーの上にテキストを表示したい場合は、以下のようにdata-text属性を追加します。
1 | <div class="loader loader-default is-active" data-text="Custom text"></div> |
あとがき
CSSだけで作成されているのに、結構複雑なローダーを実装することができますね。
最近は画像ではなくCSSでローダーを実装しているサイトも多くなっています。自分で一から作ると大変ですが、CSS Loaderを使うことで非常に楽にローダーを実装することができます。ぜひお役立てください。