react loading bar

LoadingBar.tsx

interface LoadingBarProps {
  className?: string
  loading?: boolean
}

export default function LoadingBar(props: LoadingBarProps) {
  return (
    <div className={`relative min-h-[0.25rem] ${props.className ?? ''}`}>
      <div
        className={`absolute inset-x-0 bottom-0 z-20 h-1 overflow-hidden py-[1px] ${
          props.loading ? '' : 'hidden'
        }`}
      >
        <div className="animate-slide absolute h-full w-1/3 bg-gradient-to-l from-main-200" />
      </div>
    </div>
  )
}