React-spinner'larla React'ta Yükleme Animasyonu Nasıl Oluşturulur

Plato tarafından yeniden yayınlandı

İzleyiciler: 0

Giriş

Yüklenmesi biraz zaman alan harici kaynaklardan içerik getiren React uygulamaları oluştururken, kullanıcıların ilgisini çekerek ve dikkatlerini bir yükleyici ile tutarak hoş bir kullanıcı deneyimi sağlamak her zaman iyi bir fikirdir, çünkü bu, kullanıcıların neler olup bittiğini anlamalarına yardımcı olur. onları spekülasyona bırakmaktansa.

Bu kılavuzda, bir uygulama yüklerken ve harici kaynaklardan içerik alırken yükleyici animasyonunun nasıl görüntüleneceğini, aşağıdakileri kullanarak öğreneceğiz. react-spinners kütüphane.

Bu amaçla – bir teklif alınırken bir yükleme ekranıyla birlikte teklifleri getiren küçük bir uygulama oluşturacağız:

Sıfırdan iplikçiler oluşturma hakkında daha fazla bilgi edinmek isterseniz, şuramızı okuyun. “Sıfırdan Tepkide Yükleme Animasyonu Nasıl Oluşturulur”!

Örnek Bir React Uygulaması Oluşturma

React işaretlememize bakarak başlayalım. Temel olarak, biz iki <div> içindeki öğeler ebeveyn <div> (basitlik adına) – biri loader-container ve ikincisi 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;

Şimdiye kadar sadece bir tane oluşturduk. <div> yükleyicimiz için. Şimdi nasıl ekleyebileceğimizi ve bazı içerikler yüklendiğinde tetikleyebileceğimizi görelim.

Not: Siz kontrol edebilirsiniz bu depo ve gerekirse bu kılavuzu okurken kodu çapraz kontrol edin.

Uygulamamızda React Spinners Kullanmak

react-spinner React uygulamalarımızda kullanabileceğimiz birçok spinner topluluğudur. React spinner'ı kullanmak için önce aşağıdaki komutlardan herhangi birini çalıştırarak projemizin dizinine kitaplığı kurmalıyız:

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

Bu yapıldıktan sonra, artık kullanmak istediğimiz belirli yükleyiciyi içe aktarabiliriz (bu durumda, bir ClipLoader) ve boyut ve renk gibi bazı stiller ayarlayın:

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;

The react-spinner kütüphanenin birçok faydalı özelliği vardır, örneğin, onu üçlü operatörler kullanmadan yüklemeyi işlemek için kullanabiliriz:

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

İçeriğin değerine göre içeriği görüntülemek için üçlü operatör kullanmak yerine loadingInProgress değişken, biz sadece kullandık loading={loadingInProgress} yerine.

Kontrol etmek için kullanılan CSS'yi de değiştirebiliriz. spinner-icon kullanarak override özellik:

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;