Loading

Overview

The Loading component is a versatile and customizable loading indicator that supports multiple animation types. It helps you indicate loading states within your application and can be easily styled and configured to fit your design system.

Basic Usage

To use a loading spinner, simply provide the type prop with a loader name:

<Loading />

Type

Defines the name of the loading animation to use.

• Type: EpicLoading or SvgLoading or "simple"
• Default: "simple"

If the provided type matches a known Epic or SVG loader, it will render accordingly. Otherwise, it will fallback to the default "simple" loader.

Animation Duration

Specifies how long the animation cycle lasts in milliseconds. Adjust this to speed up or slow down the animation.

• Type: number — typically one of: 1000, 1200, ...
• Default: Depends on the loader type.

<Loading type="dot-revolve" :animationDuration="2000" />

This example slows the animation to 2 seconds per cycle.

Size

Sets the size of the loader in pixels.

• Type: number — commonly: 40, 50, 55, 60, 64, 65, 66, 70

This size is applied to both width and height.

<Loading type="circular" :size="50" />

This will render the loader with a width and height of 50px.

Color

Defines the color of the loader animation. Accepts any valid CSS color string.

<Loading type="circular" color="#4F46E5" />

This will render the spinner in indigo.

Class

Allows you to apply custom CSS classes to the loader container for layout and styling purposes.

<Loading type="line-scale" class="custom-class" />

Fallback Behavior

If the specified type is not recognized in either EpicSpinners or SVG Loaders, the component will:

• Log a warning to the console.
• Fallback to the default "simple" loader.

<Loading type="unknown-loader" />

Unknown loading type: unknown-loader. Falling back to 'simple'.

Complete List of Available Loaders

You can find the full list of available loaders here: