KitlenoKitlenov2.0.0

Feedback / Loading

Loading

Loading components are used to indicate that content or data is being fetched or processed. They improve user experience by providing visual feedback during delays.

Loading Spinner

LoadingSpin.jsx
import { RotateCw } from 'lucide-react'

export default function LoadingSpin() {
  return (
    <div className="p-4 pb-8 flex flex-row gap-4">
      <RotateCw size={30} className="text-blue-500 animate-spin" />
    </div>
  )
}

Loading Alternating Rotation

LoadingAlternateRotation.jsx
import { RotateCw } from 'lucide-react'

export default function LoadingAlternateRotation() {
  return (
    <div className="p-4 pb-8 flex flex-row gap-4">
      <RotateCw size={30} className="text-4xl text-purple-500 animate-[spin_1s_ease-in-out_infinite_alternate]" />
    </div>
  )
}

Loading Pulsating Spinner

LoadingPulsatingSpinner.jsx
import { RotateCw } from 'lucide-react'

export default function LoadingPulsatingSpinner() {
  return (
    <div className="p-4 pb-8 flex flex-row gap-4">
      <RotateCw
        size={30}
        className="text-blue-500 animate-[spin_1s_linear_infinite,pulse_2s_ease-in-out_infinite]"
      />
    </div>
  )
}