1 GitHub star = 1 new component.

Star the repo
Navigationpaginationscrollloading

Infinite Scroll UI

Load-more trigger bar for infinite scroll list views.

Loading more items...

Usage

Copy and paste this code into your React component:

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

<PaginationInfiniteUi>Content</PaginationInfiniteUi>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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); } }

Quick Info

Category
Navigation
Filename
PaginationInfiniteUI.tsx
Dependencies
None โ€” pure React + CSS
Tags
paginationscrollloading