1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Модальные окнаloadingoverlayfullscreen

Page Loader Overlay

Полноэкранный экран ожидания со светящимся спиннером для долгих операций.

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { LoadingOverlayFull } from 'react-component-kit-ui/overlays';

<LoadingOverlayFull>Content</LoadingOverlayFull>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/LoadingOverlayFull.tsx + LoadingOverlayFull.css:

LoadingOverlayFull.tsx
'use client';

import './LoadingOverlayFull.css';

/** LoadingOverlayFull — ported from astro-component-kit. */
export interface LoadingOverlayFullProps {
}

export function LoadingOverlayFull({}: LoadingOverlayFullProps) {
  return (
    <>
      <div className="load-overlay" data-rk-7704fd="">
        <div className="spinner" data-rk-7704fd=""></div>
      </div>
    </>
  );
}

export default LoadingOverlayFull;
LoadingOverlayFull.css
/* LoadingOverlayFull — ported from astro-component-kit (overlays/LoadingOverlayFull.astro) */

.load-overlay:where([data-rk-7704fd]) { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; }
.spinner:where([data-rk-7704fd]) { width: 50px; height: 50px; border: 4px solid rgba(99,102,241,0.1); border-top-color: #6366f1; border-radius: 50%; animation: loading-overlay-full-spin 0.8s infinite linear; }
@keyframes loading-overlay-full-spin { to { transform: rotate(360deg); } }

Краткая информация

Категория
Модальные окна
Имя файла
LoadingOverlayFull.tsx
Зависимости
Нет — чистый React + CSS
Теги
loadingoverlayfullscreen