atomic-load-more-results

This is for:

Developer

The atomic-load-more-results component allows the user to load additional results if more are available.

Introduction

This component allows a user to load more results when they reach the bottom of a page, assuming there are more results. This approach offers a smoother and more intuitive browsing experience, as there’s no “page reload”.

User Experience and Best Practices

Usage Notes

  • The Load More Results component is especially useful when you want your user to browse more results, rather than return to and refine facets or reconsider their query.

  • When the items in a source are highly specific, a pager is a more appropriate component.

Guidelines

Users browse longer than with Load more than with Pagination. Load more is less effective when the items in a source are very specific and require comparison.

Use Cases and Examples

On an ecommerce site, users will view more products using a Load More button then with a Pager. When considering designing for mobile, a Load More button is a better experience for the user.

Reference

Pagination vs. Infinate Scroll vs. Load More Explained

Shadow Parts

Part Description

container

The container of the component.

highlight

The highlighted number of results displayed and number of results available.

load-more-results-button

The "Load more results" button.

progress-bar

The progress bar displaying a percentage of results shown over the total number of results available.

showing-results

The summary displaying which results are shown and how many are available.

CSS Custom Content

Name Description

--atomic-more-results-progress-bar-color-from

Color of the start of the gradient for the load more results progress bar.

--atomic-more-results-progress-bar-color-to

Color of the end of the gradient for the load more results progress bar.