CSSのみで作成されたローダーを簡単に実装することができる「CSS Loader」

CSSのみで作成されたローダーを簡単に実装することができる「CSS Loader」

CSSのみで作成されたローダーを簡単に実装することができる「CSS Loader」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 闇金の無料相談ならこちらがおすすめです。
  • このエントリーをはてなブックマークに追加

CSS Loaderは、クラスを追加するだけでCSSのみで作られたローダーを実装することができるライブラリです。

デモはこちらのページで確認することができます。

スポンサードリンク

CSS Loaderの使い方

GitHubからファイルをダウンロードし、distフォルダに入っているcss-loader.cssをサーバーにアップロードします。

HTMLの<head>~</head>内に以下を追加して、css-loader.cssを読み込みます。

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

ローダーの実装は、以下のように使いたいローダーのクラスを付与してください。is-activeクラスを外すと、ローダーが非アクティブになります。

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

利用できるクラスの種類は以下の通りです。上記「loader-default」のdefaultの部分をdoubleやbarに変更すると、ローダーも変わります。

  • default
  • double
  • bar
  • border
  • ball
  • smartphone
  • clock
  • curtain
  • music

ローダーの上にテキストを表示したい場合は、以下のようにdata-text属性を追加します。

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

あとがき

CSSだけで作成されているのに、結構複雑なローダーを実装することができますね。

最近は画像ではなくCSSでローダーを実装しているサイトも多くなっています。自分で一から作ると大変ですが、CSS Loaderを使うことで非常に楽にローダーを実装することができます。ぜひお役立てください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。