1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegaciónpaginationscrollloading

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 componente React:

tsx
import { PaginationInfiniteUI } from 'react-component-kit-ui/navigation';

<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/PaginationInfiniteUI.tsx + PaginationInfiniteUI.css:

PaginationInfiniteUI.tsx
'use client';

import './PaginationInfiniteUI.css';

/** PaginationInfiniteUI — ported from astro-component-kit. */
export interface PaginationInfiniteUIProps {
}

export function PaginationInfiniteUI({}: PaginationInfiniteUIProps) {
  return (
    <>
      <div className="inf-load" data-rk-3ece11="">
        <div className="dot-spin" data-rk-3ece11=""></div>
        <span data-rk-3ece11="">Loading more items...</span>
      </div>
    </>
  );
}

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

.inf-load:where([data-rk-3ece11]) { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem; color: #64748b; font-size: 0.85rem; }
.dot-spin:where([data-rk-3ece11]) { width: 30px; height: 30px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #6366f1; border-radius: 50%; animation: pagination-infinite-ui-spin 0.8s linear infinite; }
@keyframes pagination-infinite-ui-spin { to { transform: rotate(360deg); } }

Información Rápida

Categoría
Navegación
Nombre de archivo
PaginationInfiniteUI.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
paginationscrollloading