【React】おしゃれなloadingアニメーションライブラリ react-spinners

2022.02.14

おしゃれなloadingアニメーションを簡単に作ることができるreact-spinnersというライブラリの存在を知りましたので、使い方をまとめました。

アニメーションはこちらの種類があります。

React Spinners

A collection of react loading spinners

使い方は簡単！

こんな画面を作ってみます。

以下は、create-react-appで立ち上げたアプリのApp.jsにreact-spinnersを入れただけです。

import BeatLoader from "react-spinners/BeatLoader";
import "./App.css";

function App() {
  return (
    <div className="App">
      <BeatLoader />
    </div>
  );
}

export default App;

このreact-spinnersのコンポーネントはデフォルトでは、プロパティは以下の値を持っているようです。

loading: true;
color: "#000000";
css: "";
speedMultiplier: 1;

これらのプロパティと、上記公式サイトの各コンポーネントに記載されているプロパティは、指定する（変更する）ことができます。

ここでは、colorとsizeとmarginを指定してみました。

import BeatLoader from "react-spinners/BeatLoader";
import "./App.css";

function App() {
  return (
    <div className="App">
      <BeatLoader color={"#FFBB7A"} size={30} margin={4} />
    </div>
  );
}

export default App;

サイズが大きくなったのと、玉間の距離marginが大きくなったことが確認できました！

こんな簡単にloadingアニメーションを使えるのはいいですね！

以上、読んでいただきありがとうございました。