React-spinnersとReactで読み込みアニメーションを作成する方法

プラトン再発行

フォロワー： 0

概要

ロードに時間がかかる外部ソースからコンテンツをフェッチするReactアプリケーションを作成する場合、ユーザーを引き付け、ローダーに注意を向けることで、快適なユーザーエクスペリエンスを提供することをお勧めします。これにより、ユーザーは何が起こっているのかを理解するのに役立ちます。推測するためにそれらを残すよりも。

このガイドでは、アプリケーションをロードし、外部ソースからコンテンツを取得するときに、ローダーアニメーションを表示する方法を学習します。 react-spinners としょうかん。

そのために、見積もりを取得する小さなアプリケーションを作成します。見積もりの取得中にロード画面が表示されます。

スピナーを最初から作成する方法について詳しく知りたい場合は、 「Reactからロードアニメーションを最初から作成する方法」!

サンプルReactアプリの作成

まず、Reactマークアップを見てみましょう。基本的にXNUMXつあります <div> の要素親 <div> （簡単にするために）–XNUMXつは loader-container 2番目は main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

これまでのところ、作成したのは <div> 私たちのローダーのために。それでは、コンテンツが読み込まれたときに追加してトリガーする方法を見てみましょう。

注：あなたがチェックアウトすることができますこちらのリポジトリにあります。このガイドを読みながら、必要に応じてコードをクロスチェックしてください。

アプリケーションでのReactスピナーの使用

react-spinner Reactアプリケーションで使用できる多くのスピナーのコレクションです。 Reactスピナーを使用するには、最初に次のコマンドのいずれかを実行して、プロジェクトのディレクトリにライブラリをインストールする必要があります。

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

これが完了すると、使用する特定のローダーをインポートできます（この場合、 ClipLoader）そしてサイズや色のようないくつかのスタイリングを設定します：

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

　 react-spinner ライブラリには多くの便利な機能があります。たとえば、三項演算子を使用せずにロードを処理するために使用できます。

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

三項演算子を使用して、の値に基づいてコンテンツを表示する代わりに loadingInProgress 変数、単に使用しました loading={loadingInProgress} を代わりにお使いください。

制御に使用されるCSSを変更することもできます spinner-icon を使用して override 属性：

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;