Loader

The loader component helps communicate that a page or information on a page is in the process of loading or being submitted.

Component

Loading

Storybook

Storybook - Loader Documentation

Figma Demo

Guidelines

Variations

Note: the Loader component currently only has a single “spinner” variant but may expand to include illustration-style loading indicators or other treatments.

Color

The loader component is available in default, brand, and inverse.

Sizes

The loader component is available in default (48px), xs (12px), sm (16px), base (20px), and lg (24px) sizes.

Usage

The loader component is used to indicate that a page or information on a page is in the process of loading or being submitted. It should be used sparingly and only when necessary to communicate that a process is underway.

Use the default spinner component for page load situations where content or content sections may take time to appear.

Use the spinner component within a button for situations where a button or form may take time to submit.

Component Specs

API

  • color: 'default' | 'brand' | 'inverse'
    Color of the loader.

  • size: 'default' | 'xs' | 'sm' | 'base' | 'lg' Size of the loader.

Example

<script lang="ts">import { Loader } from "@getprovi/craft-svelte";
</script>

<Loader />
<Loader color="brand" size="lg" />

Types

interface Props {
	color?: 'default' | 'inverse' | 'brand';
	size?: 'xs' | 'sm' | 'base' | 'lg' | 'default';
}