Loading

Improve user experience with Bramble UI's loading component. Create engaging and seamless web interfaces with modern loading animations.

Basic Usage

import { Loading, Spinner, Dots, Clock, Bars } from '@/ui'
     
<Loading spinner={<Spinner />} />

<Loading spinner={<Dots />} />

<Loading spinner={<Clock />} />

<Loading spinner={<Bars />} />

Output

Sizes

<Loading
    className='w-10'
    spinner={<Spinner />}
/>

<Loading
    className='w-20'
    spinner={<Dots />}
/>

<Loading
    className='w-32'
    spinner={<Clock />}
/>

<Loading
    className='w-40'
    spinner={<Bars />}
/>

Output

Captions

<Loading
    className='w-10 text-sm'
    caption='Wait'
    spinner={<Spinner />}
/>

<Loading
    className='w-20 text-base'
    caption='Loading'
    spinner={<Dots />}
/>

<Loading
    className='w-32 text-xl'
    caption='Fetching'
    spinner={<Clock />}
/>

<Loading
    className='w-40 text-2xl'
    caption='Buffering'
    spinner={<Bars />}
/>

Output

Wait

Fetching

Buffering

Styling

<Loading
	className='w-10 text-sm text-info'
	caption='Wait'
	spinner={<Spinner />}
/>

<Loading
	className='w-20 text-base text-warning'
	caption='Loading'
	spinner={<Dots />}
/>

<Loading
	className='w-32 text-xl text-danger'
	caption='Fetching'
	spinner={<Clock />}
/>

<Loading
	className='w-40 text-2xl text-primary'
	caption='Buffering'
	spinner={<Bars />}
/>

Output

Wait

Fetching

Buffering

Spinners

import { Spinner, Dots, Clock, Bars, Pulse, SpinDots, Wifi } from '@/ui'
				
<Spinner />

{<Dots />

<Clock />

<Bars />

<Pulse />

<SpinDots />

<Wifi />

Output

Spinner

Dots

Clock

Bars

Pulse

SpinDots

Wifi

Lazy Loading

import dynamic from 'next/dynamic'
				
import { Spinner } from '@/ui'
				
const TwitterEmbed = dynamic(() => import('@/components/twitterembed/TwitterEmbed'), {
	ssr: false,
	loading: () => <Spinner className='aspect-square w-11 text-info' />,
})

return (
	// component will only be loaded on client side
	<TwitterEmbed
		handle='brambleUI'
		status='1681278654268035073'
		className='w-full max-w-lg text-center'
	/>
)