1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación paginationscrollloading

Infinite Scroll UI

Indicador de carga para paginación continua con botón de cargar más resultados.

Loading more items...

Uso

Copia y pega este código directamente en tu página de Astro:

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

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

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: 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>

Información Rápida

Categoría
Navegación
Nombre de archivo
InfiniteScrollUI.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
paginationscrollloading