数据结构
网络
关系数据库管理系统
操作系统
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 次查看
广告