Loading...

Block

Basic Example

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-1".

It displays a loading overlay with a red spinner, indicated by <span class="spinner-border text-danger"></span>, while blocking user interaction. This overlay effectively signals that a process is currently in progress.

Custom Message

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-2".

It displays a loading overlay with a blue spinner, indicated by <span class="spinner-border text-primary"></span>, along with the message "Loading...". This overlay effectively blocks user interaction, signaling that a process is currently in progress.

Overlay Class

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-3".

It displays a loading overlay featuring a blue spinner, represented by <span class="spinner-border text-primary"></span>, and applies a custom overlay class for styling, specified as custom-overlay fw-semibold. This overlay blocks user interaction, effectively signaling that a process is currently in progress.

Loader style 1

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-4".

It displays a loading overlay featuring a primary-colored button loader, represented by <span class="btn-loader text-primary"><i class="ri-loader-2-fill fs-20"></i></span>. This overlay blocks user interaction, effectively indicating that a process is currently in progress.

Loader style 2

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-5".

It displays a loading overlay featuring a primary-colored button loader, represented by <span class="btn-loader text-primary"><i class="ri-refresh-line fs-20"></i></span>. This overlay blocks user interaction, effectively signaling that a refreshing process is currently in progress.

Loader style 3

The initializeBlockUI function initializes the BlockUI component for the element with the attribute data-blockui-element="block-6".

It displays a loading overlay featuring a primary-colored spinner, represented by <span class="spinner-grow text-primary"></span>. This overlay blocks user interaction, effectively indicating that a process is currently in progress.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.