資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.JS 中構建動畫載入器
在本文中，我們將瞭解如何在 React.js 中製作動畫載入器。在許多網站中，動畫載入器用於增強外觀和感覺。在 React.js 中，我們可以使用 react-spinkit 包輕鬆建立精美的動畫載入器，而無需編寫數百行 CSS 程式碼。
首先建立 React 專案 −
npx create-react-app tutorialpurpose
轉至專案目錄 −
cd tutorialpurpose
示例
安裝 react-spinkit 包 −
npm i --save react-spinkit
該庫提供預製的載入器，而且將其新增到您的專案中非常容易。使用 spinner，您可以在 React 中新增任何動畫載入器。
在 App.js 中新增以下程式碼行 −
import Spinner from "react-spinkit";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: "200px",
justifyContent: "space-between",}}>
<Spinner name="double-bounce" style={{ width: 100, height: 100 }} />
<Spinner name="circle" style={{ width: 100, height: 100 }} />
<Spinner name="cube-grid" style={{ width: 100, height: 100 }} />
<Spinner name="wave" color="coral" style={{ width: 100, height: 100 }} />
<Spinner name="three-bounce" style={{ width: 100, height: 100 }} />
<Spinner name="wandering-cubes" style={{ width: 100, height: 100 }} />
<Spinner name="chasing-dots" style={{ width: 100, height: 100 }} />
<Spinner name="rotating-plane" style={{ width: 100, height: 100 }} />
<Spinner name="wordpress" style={{ width: 100, height: 100 }} />
<Spinner name="ball-grid-beat" style={{ width: 100, height: 100 }} />
</div>
);
}在此，我們首先建立了一個簡單的 div 以使所有內容居中，然後使用我們的 spinkit 庫在其中添加了不同型別的載入器。name 引數採用載入器型別，而 style 則採用載入器的寬度、高度和其他樣式。
輸出
執行後，它將產生以下輸出 −
更新於：2021 年 9 月 28 日
793 次檢視
廣告