使用“react-spinners”反应动画加载启动屏幕

简介

在 Web 开发中，没有比用户等待更令人沮丧的体验了。为了解决这个问题，我们可以使用加载启动屏幕来告诉用户正在处理请求或加载数据。而 “react-spinners” 就是一个非常优秀的反应动画加载启动屏幕的库。

安装

您可以使用 npm 或 yarn 安装 “react-spinners” 库。

npm install react-spinners

或者

yarn add react-spinners

使用

一旦安装了该库，就可以使用以下代码导入所需组件。

import { DotLoader, CircleLoader, ClipLoader } from "react-spinners";

然后，您就可以在代码中使用这些组件了。以下是一个例子：

import React, { useState } from "react";
import { DotLoader } from "react-spinners";

const Loading = () => {
  const [loading, setLoading] = useState(true);

  return (
    <div style={{ textAlign: "center", marginTop: "20px" }}>
      <DotLoader size={50} color={"#123abc"} loading={loading} />
    </div>
  );
};

export default Loading;

在上面的例子中，我们使用 DotLoader 组件来显示加载屏幕。 size 属性设置加载屏幕的大小。 color 属性设置加载屏幕的颜色。 loading 属性是一个布尔值，用于显示或隐藏加载屏幕。

您可以使用以下组件：

• BounceLoader
• CircleLoader
• ClipLoader
• FadeLoader
• GridLoader
• HashLoader
• MoonLoader
• PacmanLoader
• PropagateLoader
• PulseLoader
• RingLoader
• RiseLoader
• RotateLoader
• ScaleLoader
• SyncLoader

总结

“react-spinners” 是一个非常棒的加载屏幕库。它提供了各种各样的加载屏幕样式。使用它可以为用户提供更好的用户体验，同时还可以避免用户等待无聊的时间。