CSS pagination UI style animation | HTML, CSS & JavaScript

<div class="demo t1">
        <h2><span class="num">1</span>Classic numbered</h2>
        <div class="row">
            <button class="btn" id="t1-prev">‹</button>
            <ul id="t1-list"></ul>
            <button class="btn" id="t1-next">›</button>
        </div>
    </div>

<div class="demo t2">
        <h2><span class="num">2</span>Minimal text + arrows</h2>
        <div class="row">
            <button class="icon-btn" id="t2-prev">←</button>
            <span class="label" id="t2-label">Page 1 of 12</span>
            <button class="icon-btn" id="t2-next">→</button>
        </div>
    </div>

<div class="demo t3">
        <h2><span class="num">3</span>Dot indicators</h2>
        <div class="row" id="t3-dots"></div>
    </div>

<div class="demo t4">
        <h2><span class="num">4</span>Pill / segmented</h2>
        <div class="row">
            <ul id="t4-list"></ul>
        </div>
    </div>

<div class="demo t5">
        <h2><span class="num">5</span>Load more</h2>
        <div style="text-align:center">
            <button class="load-btn" id="t5-btn">Load more results ↓</button>
            <div class="meter">
                <div class="meter-fill" id="t5-fill" style="width:20%"></div>
            </div>
            <p class="cap" id="t5-cap">20 of 100 loaded</p>
        </div>
    </div>

<div class="demo t6">
        <h2><span class="num">6</span>Compact jump-to-page</h2>
        <div class="row">
            <button class="btn" id="t6-prev">‹</button>
            <div class="jump">
                <input type="text" id="t6-input" value="1" aria-label="Page number" inputmode="numeric"> of <span
                    id="t6-total">12</span>
            </div>
            <button class="btn" id="t6-next">›</button>
        </div>
    </div>

<div class="demo t7">
        <h2><span class="num">7</span>Progress bar</h2>
        <div class="t7-inner">
            <div class="bar">
                <div class="fill" id="t7-fill" style="width:33.3%"></div>
            </div>
            <div class="controls">
                <button class="btn" id="t7-prev">‹ Prev</button>
                <span id="t7-label">Step 4 of 12</span>
                <button class="btn" id="t7-next">Next ›</button>
            </div>
        </div>
    </div>

<div class="demo t8">
        <h2><span class="num">8</span>Bordered squares</h2>
        <div class="row">
            <ul id="t8-list"></ul>
        </div>
    </div>

<div class="demo t9">
        <h2><span class="num">9</span>Underline tabs</h2>
        <div class="row">
            <ul id="t9-list"></ul>
        </div>
    </div>

<div class="demo t10">
        <h2><span class="num">10</span>Stepper with labels</h2>
        <div class="t10-inner">
            <div class="steps" id="t10-steps"></div>
            <div class="step-nav">
                <button class="btn" id="t10-prev">‹ Back</button>
                <button class="btn" id="t10-next">Next ›</button>
            </div>
        </div>
    </div>

:root {
            --ink: #1c1c1e;
            --muted: #151543;
            --line: #0b0b0c;
            --accent: #2f5233;
            --accent-ink: #f6f7f2;
            --surface: #ffffff;
            --bg: #fafaf8;
        }

* {
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
            background: var(--bg);
            color: var(--ink);
            margin: 0;
            padding: 40px 20px 80px;
        }

h1 {
            text-align: center;
            font-size: 22px;
            margin: 0 0 4px;
        }

p.sub {
            text-align: center;
            color: var(--muted);
            font-size: 13.5px;
            margin: 0 0 48px;
        }

.demo {
            max-width: 640px;
            margin: 0 auto 56px;
            padding: 28px 20px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 12px;
        }

.demo h2 {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin: 0 0 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.demo h2 .num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            color: var(--accent-ink);
            font-size: 11px;
            font-weight: 600;
        }

.row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }

ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 4px;
            align-items: center;
        }

button {
            font-family: inherit;
            cursor: pointer;
        }

.btn {
            appearance: none;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            min-width: 34px;
            height: 34px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .15s ease;
            font-variant-numeric: tabular-nums;
        }

.btn:hover:not(:disabled):not(.active) {
            border-color: #c7c7cc;
            background: #f2f2f0;
        }

.btn:active:not(:disabled) {
            transform: scale(0.94);
        }

.btn:disabled {
            opacity: .35;
            cursor: not-allowed;
        }

.btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--accent-ink);
        }

.ellipsis {
            min-width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            font-size: 13px;
            user-select: none;
        }

/* 2. Minimal text + arrows */
        .t2 .label {
            font-size: 13.5px;
            color: var(--ink);
            font-variant-numeric: tabular-nums;
            min-width: 90px;
            text-align: center;
        }

.t2 .icon-btn {
            border: none;
            background: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--ink);
        }

.t2 .icon-btn:hover:not(:disabled) {
            background: #f2f2f0;
        }

.t2 .icon-btn:disabled {
            opacity: .3;
            cursor: not-allowed;
        }

/* 3. Dots */
        .t3 .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--line);
            border: none;
            padding: 0;
            transition: all .2s ease;
        }

.t3 .dot.active {
            background: var(--accent);
            width: 22px;
            border-radius: 5px;
        }

.t3 .dot:hover:not(.active) {
            background: #c7c7cc;
        }

/* 4. Pill numbers */
        .t4 ul {
            background: #f0f0ee;
            padding: 4px;
            border-radius: 999px;
        }

.t4 .btn {
            border: none;
            border-radius: 999px;
            background: transparent;
            min-width: 32px;
            height: 32px;
        }

.t4 .btn.active {
            background: var(--surface);
            color: var(--ink);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        }

.t4 .btn:hover:not(.active) {
            background: transparent;
            color: var(--accent);
        }

/* 5. Load more */
        .t5 .load-btn {
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--ink);
            padding: 10px 24px;
            border-radius: 999px;
            font-size: 13.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .15s ease;
        }

.t5 .load-btn:hover:not(:disabled) {
            border-color: var(--accent);
            color: var(--accent);
        }

.t5 .load-btn:disabled {
            opacity: .4;
            cursor: not-allowed;
        }

.t5 .meter {
            width: 200px;
            height: 4px;
            background: var(--line);
            border-radius: 2px;
            margin: 14px auto 0;
            overflow: hidden;
        }

.t5 .meter-fill {
            height: 100%;
            background: var(--accent);
            transition: width .25s ease;
        }

.t5 .cap {
            text-align: center;
            font-size: 12px;
            color: var(--muted);
            margin-top: 8px;
        }

/* 6. Compact jump input */
        .t6 .jump {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--muted);
        }

.t6 input {
            width: 44px;
            height: 34px;
            text-align: center;
            border: 1px solid var(--line);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            color: var(--ink);
        }

.t6 input:focus {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
            border-color: transparent;
        }

/* 7. Progress bar */
        .t7-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

.t7 .bar {
            width: 100%;
            max-width: 400px;
            height: 6px;
            background: var(--line);
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        }

.t7 .fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: var(--accent);
            border-radius: 3px;
            transition: width .2s ease;
        }

.t7 .controls {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 13px;
            color: var(--muted);
        }

.t7 .controls .btn {
            border: none;
            background: none;
            min-width: auto;
            padding: 0;
            color: var(--ink);
            font-weight: 600;
            height: auto;
        }

.t7 .controls .btn:hover:not(:disabled) {
            color: var(--accent);
            background: none;
        }

.t7 .controls .btn:disabled {
            opacity: .35;
        }

/* 8. Bordered squares */
        .t8 .btn {
            border-radius: 0;
            border-color: var(--ink);
        }

.t8 ul {
            gap: 0;
        }

.t8 .btn {
            margin-left: -1px;
        }

.t8 .btn.active {
            background: var(--ink);
            border-color: var(--ink);
            color: #fff;
            z-index: 1;
            position: relative;
        }

/* 9. Underline tabs */
        .t9 ul {
            gap: 18px;
        }

.t9 .btn {
            border: none;
            background: none;
            border-radius: 0;
            min-width: auto;
            padding: 4px 2px;
            border-bottom: 2px solid transparent;
            color: var(--muted);
            font-weight: 500;
            height: auto;
        }

.t9 .btn:hover:not(.active) {
            color: var(--ink);
            background: none;
        }

.t9 .btn.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: none;
        }

/* 10. Stepper */
        .t10-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
        }

.t10 .steps {
            display: flex;
            align-items: center;
        }

.t10 .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            position: relative;
            background: none;
            border: none;
            padding: 0;
        }

.t10 .circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            z-index: 1;
            transition: all .15s ease;
        }

.t10 .step.done .circle {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--accent-ink);
        }

.t10 .step.active .circle {
            border-color: var(--accent);
            color: var(--accent);
        }

.t10 .step small {
            font-size: 10.5px;
            color: var(--muted);
            position: absolute;
            top: 36px;
            white-space: nowrap;
        }

.t10 .connector {
            width: 44px;
            height: 1.5px;
            background: var(--line);
            transition: background .2s ease;
        }

.t10 .connector.done {
            background: var(--accent);
        }

.t10 .step-nav {
            display: flex;
            gap: 10px;
        }

.t10 .step-nav .btn {
            height: 32px;
            padding: 0 14px;
        }

/* ---------- shared helper: windowed page range with ellipsis ---------- */
        function pageRange(current, total, delta) {
            delta = delta || 1;
            const range = [];
            const withDots = [];
            let l;
            for (let i = 1; i <= total; i++) {
                if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) range.push(i);
            }
            range.forEach((i) => {
                if (l) {
                    if (i - l === 2) withDots.push(l + 1);
                    else if (i - l > 2) withDots.push('...');
                }
                withDots.push(i);
                l = i;
            });
            return withDots;
        }

/* ---------- 1. Classic numbered ---------- */
        (function () {
            const TOTAL = 12;
            let current = 1;
            const list = document.getElementById('t1-list');
            const prev = document.getElementById('t1-prev');
            const next = document.getElementById('t1-next');

/* ---------- 2. Minimal text + arrows ---------- */
        (function () {
            const TOTAL = 12;
            let current = 1;
            const label = document.getElementById('t2-label');
            const prev = document.getElementById('t2-prev');
            const next = document.getElementById('t2-next');

/* ---------- 3. Dots ---------- */
        (function () {
            const TOTAL = 5;
            let current = 0;
            const wrap = document.getElementById('t3-dots');

/* ---------- 4. Pill / segmented ---------- */
        (function () {
            const TOTAL = 4;
            let current = 1;
            const list = document.getElementById('t4-list');

/* ---------- 5. Load more ---------- */
        (function () {
            const TOTAL_ITEMS = 100;
            const STEP = 20;
            let loaded = 20;
            const btn = document.getElementById('t5-btn');
            const fill = document.getElementById('t5-fill');
            const cap = document.getElementById('t5-cap');

/* ---------- 6. Compact jump-to-page ---------- */
        (function () {
            const TOTAL = 12;
            let current = 1;
            const input = document.getElementById('t6-input');
            const prev = document.getElementById('t6-prev');
            const next = document.getElementById('t6-next');
            document.getElementById('t6-total').textContent = TOTAL;

/* ---------- 7. Progress bar ---------- */
        (function () {
            const TOTAL = 12;
            let current = 4;
            const fill = document.getElementById('t7-fill');
            const label = document.getElementById('t7-label');
            const prev = document.getElementById('t7-prev');
            const next = document.getElementById('t7-next');

/* ---------- 8. Bordered squares ---------- */
        (function () {
            const TOTAL = 5;
            let current = 2;
            const list = document.getElementById('t8-list');

/* ---------- 9. Underline tabs ---------- */
        (function () {
            const TOTAL = 5;
            let current = 1;
            const list = document.getElementById('t9-list');

/* ---------- 10. Stepper with labels ---------- */
        (function () {
            const STEPS = ['Cart', 'Shipping', 'Payment', 'Confirm'];
            let current = 1; // 0-indexed step
            const wrap = document.getElementById('t10-steps');
            const prev = document.getElementById('t10-prev');
            const next = document.getElementById('t10-next');

- CSS pagination UI style animation

Live Preview