Page | ActiveCampaign Design Guide

Loading indicators are used when information takes an extended amount of time to process and appear on-screen.

Overview


yarn add @activecampaign/camp-components-loading-indicator

Use the loading indicator along with skeleton loading to bridge the gap between initial load and when content has been fully rendered.

Use the small loading indicator within other elements, such as a button or an input.


import LoadingIndicator from '@activecampaign/camp-components-loading-indicator';
 
<LoadingIndicator size="small" />;

Use the medium loading indicator to indicate a page or modal loading. This is the default size of the loading indicator.


import LoadingIndicator from '@activecampaign/camp-components-loading-indicator';
 
<LoadingIndicator />;

Use the inverse loading indicator when the background is dark or bright, such as on a primary button.


import LoadingIndicator from '@activecampaign/camp-components-loading-indicator';
 
<LoadingIndicator appearance="inverse" size="small" />;

Use in a single component, often in an inline action, like a loading state within a button or an input, to communicate a loading state for an unspecified amount of time. * Use the loading indicator to indicate processing a request, or something that can’t be represented with the skeleton loader.

Don’t use for fast processes that take less than 400ms. Consider no loading state at all to avoid a jarring experience for the user. * Don’t use when there’s more than one element loading on the page at a time. Use a loading skeleton in this situation, unless content size is unpredictable.