loaderはサイトを作る際に必要ですよね。
loaderがあるだけで、ユーザは少しの間待てるとも言われています。
ただし、多すぎるのはNGです。例えばほぼ読み込み時間がないページにloaderが表示させているのは、待ってると錯覚しちゃうので逆効果です。
では、早速実装を始めていきます。
まずはいつも通りcreate-react-app
create-react-app my-appこれだけでreactが動く環境が出来るのはGOODですよね。
react-loader-spinnerの導入
npm install react-loader-spinnerつづいてソースを修正していきます。
■修正前
import React from ‘react’;
import { bounce } from ‘react-animations’;
import Radium, { StyleRoot } from ‘radium’;
const styles = {
bounce: {
animation: ‘x 1s’,
animationName: Radium.keyframes(bounce, ‘bounce’),
paddingLeft: ‘100px’,
paddingTop: ‘100px’
},
}
function App() {
return (
<div className=”App”>
<div>バウンドするよ！</div>
<StyleRoot>
<div className=”test” style={styles.bounce}>いはかよ
</div>
</StyleRoot>
</div>
);
}
export default App;
■修正後
import React from ‘react’;
import { bounce } from ‘react-animations’;
import Radium, { StyleRoot } from ‘radium’;
import Loader from ‘react-loader-spinner’
const styles = {
bounce: {
animation: ‘x 1s’,
animationName: Radium.keyframes(bounce, ‘bounce’),
paddingLeft: ‘100px’,
paddingTop: ‘100px’
},
}
function App() {
return (
<div className=”App”>
<Loader
timeout={2000}
type=”Bars”
color=”red”
height={100}
width={100}
/>
<div>バウンドするよ！</div>
<StyleRoot>
<div className=”test” style={styles.bounce}>いはかよ
</div>
</StyleRoot>
</div>
);
}
export default App;
react-loader-spinnerを実装後の画面
かなり騒がしい感じですが。。
ローダの種類
使えるローダも複数の種類があって色々選べます。
選択肢多いのは嬉しいですね。
まとめ
- 簡単にローダーを実装出来る
- ローダーの種類も豊富で、どれかしらお気に入りが見つかりそう。