在 React JS 中创建动画加载骨架

react jsjavascript libraryfront end technology更新于 2025/11/19 15:08:17

在本文中，我们将了解如何在 React JS 中创建动画加载骨架。我们在电商网站和旅游网站上经常看到动画加载骨架，它们用于指示页面加载后我们将看到的内容类型。它在开发者社区中很受欢迎。那么，让我们开始吧。

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

进入项目目录 −

cd tutorialpurpose

示例 1

安装 react-loading-skeleton 包 −

npm i --save react-loading-skeleton

我们将使用此包在 React 或 Node 项目中实现预制的框架加载，无需任何 CSS 或 JavaScript。

在 App.js 中添加以下代码行 −

import Skeleton, { SkeletonTheme } from "react-loadingskeleton";

export default function App() {
   return (
      <SkeletonTheme>
         <p style={{ width: 500, marginLeft: 100 }}>
            <Skeleton count={30} />
         </p>
      </SkeletonTheme>
   );
}

解释

这段代码将创建一个普通的白色加载骨架。

它首先创建一个包装器 <SkeletonTheme>，用于确定主题。
在 <SkeletonTheme> 内部，我们可以添加任何其他 DOM 元素，然后使用 <Skeleton> 来显示加载效果。
Count 告诉我们骨架将显示多少行。

输出

现在，让我们检查一下输出 −

示例 2

现在让我们创建一个彩色骨架。在 App.js 中添加以下代码行 −

import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
export default function App() {
   return (
      <SkeletonTheme color="#202020" highlightColor="#444">
         <p style={{ width: 500, marginLeft: 100 }}>
            <Skeleton count={30} />
         </p>
      </SkeletonTheme>
   );
}

这段代码将创建一个彩色的骨架加载器。这里我们只是在 color 参数中使用了一种颜色。它与之前相同，但唯一的区别在于颜色。

现在骨架的颜色会有所不同。