Introduction

Loaders serve as visual indicators that indicates that the application is in the process of loading. They are utilized during activities such as loading content or executing other processes that require the user's to wait on.

Anatomy

The loader component is composed of the following elements:

1. Progress: Indicates the status of the loading process at any given moment.
2. Path/background/inactive: Serves as the static or unanimated component of the spinner.

Usage

To use the loader component, follow these steps:

1. Choose the appropriate size according to your usage.
2. Ensure that the loader component is appropriately defined and accessible within your design assets.

Differences from Other Types

The Spinner-loader component is different from other common types of loaders, such as progress bars, Text loading, and clock spinners. Here are some differences:

1. Progress Bars: Linear indicators that fill or move horizontally to represent the progress of a task. Progress bars are commonly used for tasks with a known duration.
2. Text Spinners: Incorporate animated text elements to communicate loading or processing information. This can include phrases like "Loading..." or "Please wait."
3. Clock Spinners: Animations that mimic the movement of clock hands, suggesting a countdown or passage of time.

Loader Color

| Color | Hex code | | --------- | -------- | | Neutral-4 | #F4F4F4 |

Loader Sizes

The table below provides the size specifications: | Size | Dimensions | | ------------- | ---------- | | Mobile | 40 x 40 px | | Tablet | 60 x 60 px | | Web/Desktop | 80 x 80 px |

Loader States

The Checkbox Button component has several states, depending on the user's interaction with it | Color | Description | | -------- | ---------------------------------------------------------------------- | | Default | Indicates currently in progress |

indreka-loader component

The <indreka-loader></indreka-loader> component having the following property:

1. fullscreen having type of boolean.
2. message having type of string.

use

<indreka-loader></indreka-loader>

We can pass attributes inside like:

1. fullscreen <indreka-loader fullscreen></indreka-loader>

-- This is a toggle, if set it will show a loader with a backdrop, which will focus on the loader and the content on page will be inaccessable. If not set, we can use the loader as a simple loader which can be integrated with other components. Its size can also be adjusted by wrapping around in a div tag and specifying a specific size.

2. message
<indreka-loader message=""></indreka-loader>

-- This property will only work when fullscreen attribute is set, it will show a message below the loader. It is set to Loading... by default. User can keep the string empty if text below loader is not required.