Loader

A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add loader

Usage

Basic

Variants

So you can use any of the loaders located on the Iconify Website. Simply copy the name of the loader and paste it into the icon prop.

Sizes

You can adjust the size of the loader by passing a CSS class to the class prop.

Colors

You can adjust the color of the loader by passing a CSS class to the class prop.

Full Page Loader

The loader can operate as a full page loader by passing the full-page prop.

When the full-page prop is passed, the loader will take up the entire screen.

It can be closed manually or by pressing the esc key.