Loader

<bh-loader> | BharatLoader

The Loader component supports two variants: a circular spinner and bouncing dots, allowing customization of size, color, and animation speed.

Open in

Basic Usage

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="spinner"></BharatLoader>
        <BharatLoader variant="dots"></BharatLoader>
  </>
);
}
export default App;

Types of Loaders

Spinner

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="spinner"></BharatLoader>
  </>
);
}
export default App;

Dots

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="dots" color="white"></BharatLoader>
  </>
);
}
export default App;

Customizing Spinner

Size

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="spinner" size="24px"></BharatLoader>
        <BharatLoader variant="spinner" size="40px"></BharatLoader>
        <BharatLoader variant="spinner" size="64px"></BharatLoader>
  </>
);
}
export default App;

Color

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="spinner" color="#007bff"></BharatLoader>
        <BharatLoader variant="spinner" color="#ff5733"></BharatLoader>
        <BharatLoader variant="spinner" color="#28a745"></BharatLoader>
  </>
);
}
export default App;

Speed

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="spinner" speed="1s"></BharatLoader>
        <BharatLoader variant="spinner" speed="2s"></BharatLoader>
        <BharatLoader variant="spinner" speed="3s"></BharatLoader>
  </>
);
}
export default App;

Customizing Dots

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return (
  <>
        <BharatLoader variant="dots" color="#000"></BharatLoader>
        <BharatLoader variant="dots" color="#ff4500"></BharatLoader>
        <BharatLoader variant="dots" color="#4b0082"></BharatLoader>
        <BharatLoader variant="dots" color="#4f46e5"></BharatLoader>
  </>
);
}
export default App;

Complete Customization Example

Open in

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

import React from 'react';
import { BharatLoader } from 'bharat-ui/react/components/loader';

function App() {
return <BharatLoader  variant="spinner" size="48px" color="#4f46e5" speed="1.5s"></BharatLoader>
}
export default App;

Loader in Loading State

Open in

Loading data, please wait…

Full Page Overlay

Open in

Loading Application…

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)