Компонент ReactJS UI Ant Design Spin

Опубликовано: 8 Августа, 2022

Спиннер используется для отображения состояния загрузки страницы или раздела в наших проектах. В основном он используется, когда страница ожидает асинхронных данных или во время процесса рендеринга, соответствующая анимация загрузки может эффективно уменьшить беспокойство пользователей.

В Ant Design Library этот компонент уже собран, и его также очень легко интегрировать. Мы можем легко использовать этот компонент Spin, используя следующий подход.

Синтаксис:

<Spin />

Свойство спина:

  • delay: определяет задержку в миллисекундах для анимации загрузки.
  • индикатор: узел React вращающегося индикатора.
  • размер: определяет размер счетчика, т.е. маленький, по умолчанию и большой.
  • spinning: это логическое значение, которое определяет, должно ли вращение вращаться или нет.
  • Совет: Настройте содержание описания, если у Spin есть дочерние элементы.
  • wrapperClassName: указывает className оболочки, когда у Spin есть дочерние элементы.

Создание React-приложения:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app demo

Шаг 2: После создания приложения React войдите в него с помощью следующей команды:

cd demo

Шаг 3 : Теперь установите библиотеку antd с помощью следующей команды:

npm install antd

Структура проекта: Это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




import { Spin } from "antd";
import "./App.css";
import "antd/dist/antd.css";
  
function App() {
  return (
    <div className="App">
      <div style={{ padding: "100px" }}>
        <h1 style={{ marginBottom: "2rem" }}>
          Demo for Spin
        </h1>
        <Spin size="large" />
      </div>
    </div>
  );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод.
Ссылка: https://ant.design/components/spin/

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ