Navigation paginationscrollloading

Infinite Scroll UI

Visual indicator for dynamic infinite loading lists.

Component preview not available for: pagination-infinite-ui

Ensure the filename matches PaginationInfiniteUi.astro

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/InfiniteScrollUI.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
InfiniteScrollUI.astro
Dependencies
None — pure Astro + CSS
Tags
paginationscrollloading