如何在 Next.js 中添加加载引号？

有时候，我们需要在 Next.js 中显示不同的加载状态，其中的一种方式是添加加载引号。本文将介绍如何使用样式来创建这种效果。

步骤

步骤一：创建组件

首先，我们需要创建一个名为 LoadingQuote.js 的新组件：

import React from 'react';

const LoadingQuote = () => {
  return (
    <div className="loading-wrapper">
      <div className="loading-bar"></div>
      <div className="loading-bar"></div>
      <div className="loading-bar"></div>
      <div className="loading-bar"></div>
    </div>
  );
};

export default LoadingQuote;

我们将在这里创建加载引号。

步骤二：添加样式

接下来，我们需要添加一些 CSS 样式来定义加载引号。

.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-bar {
  width: 6px;
  height: 20px;
  margin: 0px 5px;
  background-color: #aaa;
  border-radius: 3px;
  animation: loading 1s infinite;
}

.loading-bar:nth-child(1) {
  animation-delay: 0s;
}

.loading-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-bar:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 3);
  }
  40% {
    transform: scale(1);
  }
}

这里我们使用了 CSS3 的动画来实现加载条的动画效果。

步骤三：使用组件

最后，我们需要在需要显示加载引号的地方使用 LoadingQuote 组件。

import React from 'react';
import LoadingQuote from '../components/LoadingQuote';

const HomePage = () => {
  return (
    <div>
      <LoadingQuote />
      <p>加载中...</p>
    </div>
  );
};

export default HomePage;

这里我们简单地在首页里使用了 LoadingQuote 组件，并在下面添加一句话来说明当前在加载中。

结论

现在，我们已经在 Next.js 中创建了一个加载引号组件。你可以使用它来提供更好的用户体验，给用户展示应用正在工作中。