「Halogen」16種のロード中アニメを表示するReactコンポーネント

プログラミング#React
suin
suin
2015年10月18日 投稿
image.png (160.9 kB)

Reactを使ってシングルページアプリケーションを作成すると、
サーバと非同期の通信をすることが増えます。

ロード中や通信中であることをUIにちゃんと表現できないと、
ユーザに「バグってる?」と思われたりとユーザ体験を壊すことがあります。

Halogenは、ローダーアニメーションを提供してくれるReactコンポーネントです。

インストール方法

shell
npm install halogen --save

使い方

使い方はhalogenパッケージから使いたいローダーをインポートするだけです。

jsx
import React from "react";
import ReactDom from "react-dom";
import {PulseLoader} from "halogen";

ReactDom.render(
  <div>
    <PulseLoader color="#26A65B" />
  </div>,
  document.getElementById("demo1")
);

デモ

demo1.gif (13.8 kB)

ローダーは16種類提供されています。

  1. PulseLoader
  2. RotateLoader
  3. BeatLoader
  4. RiseLoader
  5. SyncLoader
  6. GridLoader
  7. ClipLoader
  8. FadeLoader
  9. ScaleLoader
  10. SquareLoader
  11. PacmanLoader
  12. SkewLoader
  13. RingLoader
  14. MoonLoader
  15. DotLoader
  16. BounceLoader

color属性を指定すると、好きな色に変更することができます。

demo4.gif (111.5 kB)

size属性でローダーのサイズの変更もできます。

demo3.gif (58.9 kB)

Halogenは、ローダーを自作するのは面倒、というときにサクッと導入できるのがいいところです。