Ant Design中的Loading加载效果实现

在Ant Design中，加载状态的实现是一个常见的需求。本文将探讨如何使用原生方法实现一个优雅的loading加载效果。

实现方法

Ant Design中的loading加载效果主要由两个部分组成：

• 加载动画： 通常使用旋转的图标或进度条来表示。
• 遮罩层： 一个透明或半透明的覆盖层，覆盖在需要加载的内容上。

以下是实现这些部分的详细步骤：

加载动画

• 首先，创建一个父元素来包含加载动画和遮罩层。
• 使用CSS将父元素设置成居中对齐，通常可以通过使用flex或grid布局来实现。
• 在父元素中，添加一个div元素作为加载动画的容器，并使用绝对定位将其放置在父元素的中心。
• 选择一个合适的加载动画图标或进度条，并将其添加到加载动画容器中。
• 设置加载动画容器的动画效果，如旋转或进度条增长。

遮罩层

• 在父元素中添加一个div元素作为遮罩层，并将其放置在加载动画容器之上。
• 设置遮罩层的背景颜色，通常为半透明黑色或白色。
• 设置遮罩层的z-index值，使其高于加载动画容器。

代码示例

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

  const handleToggleLoading = () => {
    setLoading(!loading);
  };

  return (
    <div className="container">
      {loading && (
        <div className="loading-overlay">
          <div className="loading-spinner"></div>
        </div>
      )}
      <button onClick={handleToggleLoading}>Toggle Loading</button>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

CSS

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

关键词：