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

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

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

React 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アニメーションを使えるのはいいですね!

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

コメント