Dark Logo

Urbix

CTRL D
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.

Theme Customization

Layout:
Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
LTR
RTL
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Medium
Icon
Icon hover
Sidebar Color:
Light
Dark