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

2552 ワード

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

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

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