Numbered page navigation with truncation. Two variants: the classic stripe, and a small animated pill version for tighter spaces.
Pagination splits long lists across multiple pages with a numbered control at the bottom — prev / 1 / 2 / 3 / … / 12 / next. The standard pattern for blogs, archives, search results, and admin tables. Different from "Load More" or infinite scroll because users get a sense of where they are and can jump to any page. Crucially: always truncate the middle with ellipses on long sets (don't show all 50 pages).
An array of page numbers is rendered as a row of buttons. JS calculates which to show: always page 1, always the last page, always the current page ±1, and ellipses for any gap. Prev/Next buttons disable when at the first/last page. The active page gets a high-contrast filled style. The second variant (animated pill) uses a pill-marker background that springs between active buttons for very compact paginators (e.g. dashboard filters).
Click any number — the page changes (and content swaps). Try clicking 1, then 12, to see truncation re-balance.
Build a pagination component for a list of 72 items, 6 per page (12 pages total). Layout: a 3-col grid of tile cards above, a footer row below with "Showing X-Y of 72 results" on the left and the page nav on the right. Page nav structure: a Prev button (« icon), then page-number buttons, then a Next button (» icon). Page buttons styled as 36px square monospace buttons (transparent default, hover white background + border, active filled dark). Use TRUNCATION logic to compute which numbers to show: always page 1, always the last page (12), always current page and current±1. Insert "…" gap buttons for any range gaps. Example: current=6 shows "1 … 5 6 7 … 12". Prev/Next disabled (opacity 0.4) at first/last page. Mark active with aria-current="page". Use font-variant-numeric:tabular-nums on all number buttons. Optionally include a SECOND variant — compact animated-pill paginator: a small flex row of buttons with a separate ::bg div that springs between active buttons via transition:left/width with cubic-bezier(0.34, 1.56, 0.64, 1).