反応ローダースピナーを使う方法

何が反応ローダースピナーですか？

react-spinner-loader ビューにデータをロードする前に、Async Wait操作を実行することができる単純なReply SVGスピナーコンポーネントを提供します.

反応ローダースピナーを使う方法。

お好みの依存マネージャを使用してライブラリをインストールできます.
糸の使用yarn add react-loader-spinnerNPMを使うnpm install react-loader-spinner --save以下に使用するコードの例を示しますreact-loader-spinner あなたの反応アプリケーションで.
まず、必要なCSSをインポートします.CSSをメインにインポートapp.js ファイル.
コードサンプル

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

Then:

import { Audio } from  'react-loader-spinner'


<Audio
    height="100"
    width="100"
    color='grey'
    ariaLabel='loading'
  />

注意: WebpackがCSSで問題をスローする場合.(このパッケージの古いバージョン用).以下のように変更しますtest: /\.scss$/ to test: /\.s?css$/新しいバージョンでは、CSSファイルをapp.js

反応ローダスピナーと実装のタイプ

オーディオは、実装サンプルです<Audio color="#00BFFF" height={80} width={80} />

ここでBallTriangleは実装コードサンプルです.<BallTriangle color="#00BFFF" height={80} width={80} />

BARは実装コードサンプルです.<Bars color="#00BFFF" height={80} width={80} />

円は実装コードサンプルです.<Circles color="#00BFFF" height={80} width={80}/>

グリッドは、実装コードサンプルです.<Grid color="#00BFFF" height={80} width={80} />

ここでの心臓は実装コードサンプルです<Hearts color="#00BFFF" height={80} width={80} />

ここで楕円は実装コードサンプルです.<Oval color="#00BFFF" height={80} width={80} />

ここでPUFFは実装コードサンプルです.<Puff color="#00BFFF" height={80} width={80} />

リングは、実装コードサンプルです.<Rings color="#00BFFF" height={80} width={80} />

ここでは、実装コードの例を示します.<TailSpin color="#00BFFF" height={80} width={80} />

ここでは、実装コードサンプルを示します.<ThreeDots color="#00BFFF" height={80} width={80} />

注:リングスピナーSafariでサポートされていません.
Check the demo here

読んでくれてありがとう.
ハッピーコーディング!