在 React.JS 中构建动画加载器

react jsjavascript libraryfront end technology更新于 2025/11/19 3:56:17

在本文中，我们将了解如何在 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 参数接受加载器的宽度、高度和其他样式。