Essentially, loaders are what you see on the screen while the rest of the page's content is still loading.

Where this element can be seen?

Loaders are visible throughout the entire application, usually when content is being loaded from the back-end. It’s easier to see it in pages in which the content is loaded on the fly, such as the checkout page, in the shipping method area.

How the design may look like?

Issues with the designs

• Not mentioned speed of animation

How to develop styles for this element?

The Loader component is responsible for rendering loaders, and it accepts an isLoading prop, which is true if the loader should be displayed, and false otherwise.

<aside> ℹ️ Usually, styling this element takes from-to: 4-5h

</aside>

However, if you want to change the loader main icon:

• Create _loader.scss under src/style/abstract/.
• Put all the loader styles inside the %loader class. Something like this:

%loader {
	// Styles here
}

<aside> ➡️ During development, to easier visualize what is being styled, it’s recommended to render a loader component on a page of easy access. Do it by simply adding a <Loader/> component on a page or component of your choice, but don’t forget to remove it before you commit any change.

</aside>

Loaders commonly have animations. Check if the existing animations on the default ScandiPWA theme serve your purpose.

If you want to create a new animation:

• Create _keyframes.override.scss under src/style/base/ .
• Add @import ‘./base/keyframes.override’; to main.scss, if not already.
• Create the needed keyframes inside _keyframes.override.scss.

To style the Loader component, override its .style.scss file if you want to make changes related to the component positioning and frame. You can also customize how it is rendered by overriding the .component.js file.

How the implementation may look like?

Implementation Example #1