「Halogen」16種のロード中アニメを表示するReactコンポーネント
プログラミング#React
suin
・
2015年10月18日 投稿
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")
);
> デモデモ
ローダーは16種類提供されています。
- PulseLoader
- RotateLoader
- BeatLoader
- RiseLoader
- SyncLoader
- GridLoader
- ClipLoader
- FadeLoader
- ScaleLoader
- SquareLoader
- PacmanLoader
- SkewLoader
- RingLoader
- MoonLoader
- DotLoader
- BounceLoader
color属性を指定すると、好きな色に変更することができます。
size属性でローダーのサイズの変更もできます。
Halogenは、ローダーを自作するのは面倒、というときにサクッと導入できるのがいいところです。