Icon Loader Components
This set of components provides loading animations using various icons from
the Iconify (opens in a new tab) library. The main components include
FormLoader and FullSiteLoader. The FormLoader component renders a
customizable loading icon, while the FullSiteLoader component displays a
full-site loading screen with additional branding elements.
FormLoader Component
The FormLoader component allows you to display loading animations with
different icon options. It accepts an icon prop to specify the type of
loading animation. If the provided icon name is not recognized, it defaults to
'bars-rotate-fade'.
FormLoader Examples Preview
Form Loader Usage
import { FormLoader } from "@/@core/loading";
// Use FormLoader with default or customized props
const MyLoadingComponent = () => {
return <FormLoader icon="bars-rotate-fade" />;
};FullSiteLoader Component
The FullSiteLoader component provides a full-site loading screen with
options to display a logo, site name, and a loading icon. It uses the
FormLoader component internally.
FullSiteLoader Examples Preview
FullSiteLoader Usage
import { FullSiteLoader } from "@/@core/loading";
// Use FullSiteLoader with default or customized props
const MyFullSiteLoader = () => {
return <FullSiteLoader />;
};Props
FormLoader Props
| Prop name | Type | Default value | Description |
|---|---|---|---|
icon | string | 'bars-rotate-fade' | Specifies the type of loading animation. |
| ...rest | - | - | Other HTML attributes that can be passed to the underlying Icon component. |
FullSiteLoader Props
| Prop name | Type | Default value | Description |
|---|---|---|---|
logo | boolean | true | Whether to display the site's global logo. |
label | boolean | true | Whether to display the site's name as a label. |
loadIcon | boolean | true | Whether to display the loading icon. |
icon | string | 'bars-rotate-fade' | Specifies the type of loading animation. |
| ...rest | - | - | Other HTML attributes that can be passed to the underlying FormLoader component. |
Icons
The FormLoader & FullSiteLoader components support the following icons:
Certainly! Here's a table listing all the icon names:
| Icon Names |
|---|
| 12-dots-scale-rotate |
| 180-ring |
| 180-ring-with-bg |
| 270-ring |
| 270-ring-with-bg |
| 3-dots-bounce |
| 3-dots-fade |
| 3-dots-move |
| 3-dots-rotate |
| 3-dots-scale |
| 3-dots-scale-middle |
| 6-dots-rotate |
| 6-dots-scale |
| 6-dots-scale-middle |
| 8-dots-rotate |
| 90-ring |
| 90-ring-with-bg |
| bars-fade |
| bars-rotate-fade |
| bars-scale |
| bars-scale-fade |
| bars-scale-middle |
| blocks-scale |
| blocks-shuffle-2 |
| blocks-shuffle-3 |
| blocks-wave |
| bouncing-ball |
| clock |
| dot-revolve |
| eclipse |
| eclipse-half |
| gooey-balls-1 |
| gooey-balls-2 |
| pulse |
| pulse-2 |
| pulse-3 |
| pulse-multiple |
| pulse-ring |
| pulse-rings-2 |
| pulse-rings-3 |
| pulse-rings-multiple |
| ring-resize |
| tadpole |
| wifi |
| wifi-fade |
| wind-toy |
Choose the desired icon name when using the FormLoader component.