##### 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