Loader

<bh-loader>

The <bh-loader> component supports two variants: a circular spinner and bouncing dots, allowing customization of size, color, and animation speed.

Basic Usage

Preview

HTML

<bh-loader variant="spinner"></bh-loader>
<bh-loader variant="dots"></bh-loader>

Types of Loaders

Spinner

Preview

HTML

<bh-loader variant="spinner"></bh-loader>

Dots

Preview

HTML

<bh-loader variant="dots" color="white"></bh-loader>

Customizing Spinner

Size

Preview

HTML

<bh-loader variant="spinner" size="24px"></bh-loader>
<bh-loader variant="spinner" size="40px"></bh-loader>
<bh-loader variant="spinner" size="64px"></bh-loader>

Color

Preview

HTML

<bh-loader variant="spinner" color="#007bff"></bh-loader>
<bh-loader variant="spinner" color="#ff5733"></bh-loader>
<bh-loader variant="spinner" color="#28a745"></bh-loader>

Speed

Preview

HTML

  <bh-loader variant="spinner" speed="1s"></bh-loader>
  <bh-loader variant="spinner" speed="2s"></bh-loader>
  <bh-loader variant="spinner" speed="3s"></bh-loader>

Customizing Dots

Preview

HTML

<bh-loader variant="dots" color="#000"></bh-loader>
<bh-loader variant="dots" color="#ff4500"></bh-loader>
<bh-loader variant="dots" color="#4b0082"></bh-loader>
<bh-loader variant="dots" color="#4f46e5"></bh-loader>

Complete Customization Example

Preview

HTML

<bh-loader variant="spinner" size="48px" color="#4f46e5" speed="1.5s"></bh-loader>

Loader in Loading State

Preview

Loading data, please wait…

Full Page Overlay

Preview

Loading Application…

Page Content

Properties

Property	Type	Description
variant	string	Type of loader: "spinner" or "dots"
size	string	Size of the spinner loader
color	string	Color of the loader (both variants)
speed	string	Rotation speed (only for spinner)