Tape measure pagination
Drag a yellow tape measure with inertia until your page sits under the red line, or step through it with the arrows.
Settings
Code
<nav class="uvq12-tp" aria-label="Pagination"><p class="rd"><span>Page</span><b class="pn">7</b><small>/ 24</small></p><div class="cs"><button type="button" class="pv" aria-label="Previous page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="vw" role="slider" tabindex="0" aria-label="Page" aria-valuemin="1" aria-valuemax="24" aria-valuenow="7"><div class="tp"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span></div><i class="hl" aria-hidden="true"></i></div><button type="button" class="nx" aria-label="Next page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></nav>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
Pagination drawn as a yellow tape measure: drag it sideways, let go and it keeps sliding with inertia before snapping the nearest page under a red hairline. The arrows, keyboard and a click on any number also work, and the big counter above updates as you go. It suits long galleries, catalogues and archives where scrubbing feels faster than clicking page by page.
The main color sets the tape and the secondary color the hairline. Change the number of pages in the data, and keep the counter above so people always know where they are.