Top Loader

A slim loading indicator that appears at the top of the page to show loading progress.

How to Import

Add this import to your component file

app/page.tsx

1import { TopLoader } from '@/components/lightswind/top-loader';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

isLoading	boolean	false	Whether the loader is visible.	Required
color	string	var(--primary)	The color of the loader bar.	Optional
height	string \| number	2px	The height of the loader bar.	Optional
waitingTime	number	500	Time in milliseconds before the loader appears.	Optional
className	string	-	Additional CSS classes to apply to the loader.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { TopLoader } from '@/components/lightswind/top-loader';
2import { Button } from '@/components/lightswind/button';
3import { useState } from 'react';
4
5export function TopLoaderDemo() {
6  const [isLoading, setIsLoading] = useState(false);
7  
8  return (
9    <div>
10      <TopLoader isLoading={isLoading} />
11      <Button
12        onClick={() => {
13          setIsLoading(true);
14          setTimeout(() => setIsLoading(false), 3000);
15        }}
16      >
17        Start Loading
18      </Button>
19    </div>
20  );
21}

Previousterminal-card

Nexttop-sticky-bar

A product byＭＵＨＩＬＡＮ and Team❤️.

Top Loader

A slim loading indicator that appears at the top of the page to show loading progress.

...

How to Import

Add this import to your component file

app/page.tsx

1import { TopLoader } from '@/components/lightswind/top-loader';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

isLoading	boolean	false	Whether the loader is visible.	Required
color	string	var(--primary)	The color of the loader bar.	Optional
height	string \| number	2px	The height of the loader bar.	Optional
waitingTime	number	500	Time in milliseconds before the loader appears.	Optional
className	string	-	Additional CSS classes to apply to the loader.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { TopLoader } from '@/components/lightswind/top-loader';
2import { Button } from '@/components/lightswind/button';
3import { useState } from 'react';
4
5export function TopLoaderDemo() {
6  const [isLoading, setIsLoading] = useState(false);
7  
8  return (
9    <div>
10      <TopLoader isLoading={isLoading} />
11      <Button
12        onClick={() => {
13          setIsLoading(true);
14          setTimeout(() => setIsLoading(false), 3000);
15        }}
16      >
17        Start Loading
18      </Button>
19    </div>
20  );
21}

Previousterminal-card

Nexttop-sticky-bar

A product byＭＵＨＩＬＡＮ and Team❤️.

Top Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Top Loader

How to Import

Props

Basic Usage

On This Page

Contribute

React Top Loader Component - Lightswind UI

Key Details of React Top Loader

Top Loader

How to Import

Props

Basic Usage

On This Page

Contribute

Top Loader

How to Import

Props

Basic Usage

On This Page

Contribute