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

  • Z时代
  • 2024-01-10
  • 分类：综合

在本文中，我们将了解如何在 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>将用于显示加载效果。

  • 计数告诉我们骨架将显示多少行。

输出结果

现在，让我们检查输出 -

示例 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>
   );
}

此代码将创建一个彩色骨架加载器。在这里，我们只是在颜色参数中使用了一种颜色。它和以前一样，但唯一的区别是颜色。

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

输出结果

现在，让我们检查输出 -

以上是 在 React JS 中创建动画加载骨架 的全部内容， 来源链接： utcz.com/z/363169.html

回到顶部