Loading content must be a smooth experience and under the user's direct control
GEL defines numbered pagination for navigation between whole pages of content. The Load more pattern builds upon this behaviour to allow the incremental loading of content items on a single page. It would most commonly be used in conjunction with a content filtering mechanism for a search or content category.
Load more is preferred to pagination for the exploration of content because it does not ask screen reader and keyboard users to traverse the header/preamble of a new page load for each content request. In addition, the pattern eschews issues found in automatic infinite scrolling  implementations. These issues include:
- Unsolicited scrolling resulting in misplacement
- The inability to move past the content area to the foot of the page
- Lack of clear feedback and focus management
The Reference implementation's script acts upon the
class="gel-loader" element. In the code sample to follow, this is shown in the expected context of a
<main> element, and preceded by the page's principle heading. This sample just shows the basic structure, with descriptions of subcomponents of the pattern to follow.
<main id="main" tabindex="-1"> <h1>You searched for "camera"</h1> <div class="gel-loader"> <ul class="gel-loader__items"> <!-- loaded items --> </ul> <div class="gel-loader__foot"> <div class="gel-loader__loading" role="status" hidden> <!-- the loading indicator (spinner) --> </div> <button class="gel-loader__button gel-button" hidden>Load more</button> <nav class="gel-pages" aria-labelledby="gel-pagination-label"> <!-- the pagination functionality --> </nav> </div> </div> </main>