Pagination here is a “load more” pattern: a counter, a thin progress bar and a button that adds more items to a list without a page load.
How to add pagination to a list. The files are components/css/pagination.css and components/js/pagination.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/button.css"> and pagination.css, then <script src="/components/js/pagination.js"></script>. |
| 2. Place | Put the component last in the section or list. Add no padding below it. |
| 3. Key | Pick a key (for example products). The ids {key}-pagination-count, {key}-pagination-bar and pagination-{key} must exist. |
| 4. Update | After loading items call updatePagination(key, visible, total). |
Copy the markup you need.
| Class | Use |
|---|---|
pagination | The component: 190px, centered, space above. |
pagination__info | Counter and bar. |
pagination__count | The counter text. |
pagination__progress | The 2px track. |
pagination__progress-bar | The fill, width set by script. |
| Function | What it does |
|---|---|
updatePagination(key, visible, total) | Sets the counter, the fill width and disables the button when visible >= total. |
btn btn--secondary btn--md.The component is one CSS file and one JS file, shared by every page. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.