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

在本文中，我们将了解如何在 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 参数中使用了颜色。它与之前相同，唯一的区别是颜色。

现在骨架的颜色将不同。

输出

现在，让我们检查输出 -

更新于: 2021年9月29日

324 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.