PageLoader

Importing

import { PageLoader } from '@customerio/pluma-components/react';

Usage

By default, the component will render a Customer.io logo, with a spinner and a "loading" message underneath:

React

React

Ember

Ember

Loading…

<PageLoader />

The component is intended to take up the full width and height of its container, and will center its contents.

Image

The logo can be replaced with a custom image or SVG by supplying a URL string as the imageSrc prop. Additionally, the size of the image can be controlled with the imageWidth and imageHeight props.

React

React

Ember

Ember

Loading…

import { PageLoader } from '@customerio/pluma-components/react';
import feather from './feather.svg';

export default function Example() {
	return (
		<PageLoader imageSrc={feather} imageWidth="72" />
	);
}

The image can also be disabled by setting the imageSrc prop to null:

<PageLoader imageSrc={null} />

Label

The text, which is displayed next to the spinner, can be customized via the label prop:

React

React

Ember

Ember

Please wait

<PageLoader label="Please wait" />