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

Поставить звезду
Навигация paginationscrollloading

Infinite Scroll UI

Компонент для бесконечной ленты с кнопкой подгрузки следующих результатов.

Loading more items...

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

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

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

<PaginationInfiniteUi>Content</PaginationInfiniteUi>
--- import { InfiniteScrollUI } from 'astro-component-kit'; --- <PaginationInfiniteUi>Content</PaginationInfiniteUi>

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

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

astro 
---
---
<div class="inf-load">
  <div class="dot-spin"></div>
  <span>Loading more items...</span>
</div>
<style>
  .inf-load { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem; color: #64748b; font-size: 0.85rem; }
  .dot-spin { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
--- --- <div class="inf-load"> <div class="dot-spin"></div> <span>Loading more items...</span> </div> <style> .inf-load { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem; color: #64748b; font-size: 0.85rem; } .dot-spin { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style>

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

Категория
Навигация
Имя файла
InfiniteScrollUI.astro
Зависимости
Нет — чистый Astro + CSS
Теги
paginationscrollloading