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

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

Page Loader Overlay

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

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

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { PageLoaderOverlay } from 'astro-component-kit';
---

<LoadingOverlayFull>Content</LoadingOverlayFull>
--- import { PageLoaderOverlay } from 'astro-component-kit'; --- <LoadingOverlayFull>Content</LoadingOverlayFull>

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

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

astro 
---
---
<div class="load-overlay">
  <div class="spinner"></div>
</div>
<style>
  .load-overlay { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; }
  .spinner { width: 50px; height: 50px; border: 4px solid rgba(99,102,241,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s infinite linear; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
--- --- <div class="load-overlay"> <div class="spinner"></div> </div> <style> .load-overlay { position: fixed; inset: 0; background: #080b14; z-index: 9999; display: grid; place-items: center; } .spinner { width: 50px; height: 50px; border: 4px solid rgba(99,102,241,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s infinite linear; } @keyframes spin { to { transform: rotate(360deg); } } </style>

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

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