Loader

Type

bar-bounce

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="bar-bounce" />
</div>

<div className='loader bw'>
  <div className='bar-bounce' />
</div>

spin

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="spin" />
</div>

<div className='loader bw'>
  <div className='spin' />
</div>

bar-shake-y

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="bar-shake-y" />
</div>

<div className='loader bw'>
  <div className='bar-shake-y' />
</div>

bar-shake-x

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="bar-shake-x" />
</div>

<div className='loader bw'>
  <div className='bar-shake-x' />
</div>

flow-cross

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="flow-cross" />
</div>

<div className='loader bw'>
  <div className='flow-cross' />
</div>

ping-wave

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="ping-wave" />
</div>

<div className='loader bw'>
  <div className='ping-wave' />
</div>

dot-flash

Preview

Code

HTML

Code

JSX/TSX

<div class="loader bw">
	<div class="dot-flash" />
</div>

<div className='loader bw'>
  <div className='dot-flash' />
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<div class="loader bw xs">
		<div class="spin" />
	</div>
	<div class="loader bw sm">
		<div class="spin" />
	</div>
	<div class="loader bw">
		<div class="spin" />
	</div>
	<div class="loader bw lg">
		<div class="spin" />
	</div>
	<div class="loader bw xl">
		<div class="spin" />
	</div>
</div>

<div className='flex gap-4'>
  <div className='loader bw xs'>
    <div className='spin' />
  </div>
  <div className='loader bw sm'>
    <div className='spin' />
  </div>
  <div className='loader bw'>
    <div className='spin' />
  </div>
  <div className='loader bw lg'>
    <div className='spin' />
  </div>
  <div className='loader bw xl'>
    <div className='spin' />
  </div>
</div>

Link Modal