Load More Button Template

Allow users to progressively load more content with this intuitive and versatile button.

This is a fundamental component for any content-heavy page, such as a blog archive, product grid, or user feed, improving performance by loading items on demand.

Get Source Code Preview

About the Load More Button

Instead of overwhelming users with a huge list of items or forcing them to navigate through numbered pages, a "Load More" button provides a friendly way to reveal more content. It signals that there is more to see, giving the user control over when they see it. This pattern can improve initial page load times and create a smoother browsing experience.

Features

Interactive States: Includes distinct styles for default, loading, and disabled states to provide clear user feedback.
Animated Loader: A simple, pure CSS loading spinner appears when the button is clicked, indicating that new content is being fetched.
Accessible Implementation: The button's states are managed in a way that is clear to assistive technologies. The use of aria-live on a separate status element can announce when new content has loaded.
Example Logic Included: The JavaScript provides a simple demonstration of how to handle the button's states, including a "no more items" scenario.

Code Breakdown

The component includes the button itself and some sample list items to demonstrate its use. The button contains a text span and a CSS-only spinner element.

JavaScript controls the button's behavior. On click, it adds an is-loading class to the button. This class uses CSS to hide the text and show the spinner. The script simulates an API call with setTimeout. After loading, it adds new items to the list and resets the button. A counter tracks the clicks, and once a limit is reached, the button becomes disabled to show there's nothing left to load.

Code

Here is the complete HTML, CSS, and JavaScript for the "Load More" button demonstration.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load More Button</title>
    <style>
        /*
         Component: Load More Button
         Description: A button for asynchronously loading more content items into a list.
        */

:root {
            --load-more-bg: #17a2b8;
            --load-more-text: #ffffff;
            --load-more-bg-hover: #138496;
            --load-more-focus-outline: #17a2b8;
            --list-item-bg: #ffffff;
            --list-item-border: #dee2e6;
        }

.load-more-demo-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: #f8f9fa;
            border-radius: 8px;
        }

.content-list-1 {
            list-style-type: none;
            padding: 0;
            margin: 0 0 2rem 0;
        }

.content-list-1 li {
            background-color: var(--list-item-bg);
            border: 1px solid var(--list-item-border);
            border-radius: 6px;
            padding: 1rem 1.5rem;
            margin-bottom: 0.75rem;
            opacity: 0;
            transform: translateY(10px);
            animation: fadeIn 0.5s ease forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.load-more-btn-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.9rem 1.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--load-more-text);
            background-color: var(--load-more-bg);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.load-more-btn-1:hover {
            background-color: var(--load-more-bg-hover);
        }

.load-more-btn-1:focus-visible {
            outline: 3px solid var(--load-more-focus-outline);
            outline-offset: 2px;
        }

/* --- Loading Spinner --- */
        .loader {
            display: none;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: var(--load-more-text);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

.load-more-btn-1.is-loading .btn-text {
            display: none;
        }

.load-more-btn-1.is-loading .loader {
            display: block;
        }
        
        /* --- Disabled State --- */
        .load-more-btn-1:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
            opacity: 0.65;
        }
        .load-more-btn-1:disabled .loader {
            display: none;
        }
        .load-more-btn-1:disabled .btn-text {
            display: inline-block;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

/* Announce content updates for screen readers */
        .visually-hidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }
    </style>
</head>
<body>

<div class="load-more-demo-1">
        <h2>Latest Articles</h2>
        <ul class="content-list-1" id="contentList1">
            <li>Article by Persephone Plum</li>
            <li>Article by Atticus Finchley</li>
            <li>Article by Esmeralda Quill</li>
        </ul>
        
        <button type="button" class="load-more-btn-1" id="loadMoreBtn1">
            <span class="btn-text">Load More</span>
            <div class="loader"></div>
        </button>
        <div id="loadStatus1" class="visually-hidden" aria-live="polite"></div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const loadMoreBtn = document.getElementById('loadMoreBtn1');
            const contentList = document.getElementById('contentList1');
            const loadStatus = document.getElementById('loadStatus1');

let clickCount = 0;
            const newContent = [
                ['Barnaby Wisp', 'Cornelius Gable'],
                ['Ophelia Vex', 'Horatio Fiddle'],
                ['Genevieve Croft', 'Silas Rex']
            ];

loadMoreBtn.addEventListener('click', () => {
                loadMoreBtn.classList.add('is-loading');
                loadMoreBtn.disabled = true;

setTimeout(() => {
                    loadMoreBtn.classList.remove('is-loading');

if (clickCount < newContent.length) {
                        const itemsToLoad = newContent[clickCount];
                        itemsToLoad.forEach(itemText => {
                            const newItem = document.createElement('li');
                            newItem.textContent = `Article by ${itemText}`;
                            contentList.appendChild(newItem);
                        });
                        
                        loadStatus.textContent = `${itemsToLoad.length} new articles have been loaded.`;
                        loadMoreBtn.disabled = false;
                        clickCount++;

if (clickCount >= newContent.length) {
                             setTimeout(() => {
                                loadMoreBtn.querySelector('.btn-text').textContent = 'No More Articles';
                                loadMoreBtn.disabled = true;
                             }, 100);
                        }

}
                }, 1500); // Simulate network request delay
            });
        });
    </script>

</body>
</html>

View Output