Loading

A simple spinning loader animation. Use it as a visual indicator while content loads or during processing.


import { Loading } from '@appfunnel-dev/sdk/elements'
 
// Basic — inherits color from parent text color
<Loading />
 
// Custom color and size
<Loading color="#2563EB" size="lg" />
 
// Custom pixel size and speed
<Loading customSize={24} borderWidth={2} color="#fff" speed={600} />

Props

Prop	Type	Default	Description
`color`	`string`	`currentColor`	Spinner color. Inherits from parent if not set
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Predefined size preset
`customSize`	`number`	—	Custom size in pixels (overrides `size` preset)
`borderWidth`	`number`	—	Custom border width in pixels (overrides `size` preset)
`speed`	`number`	`800`	Animation speed in milliseconds
`className`	`string`	—	Additional CSS class name
`style`	`CSSProperties`	—	Additional inline styles

Size presets

Size	Dimensions	Border
`xs`	20px	2px
`sm`	30px	3px
`md`	40px	3px
`lg`	50px	4px
`xl`	60px	4px

Usage in buttons

A common pattern is showing a spinner inside a button during async operations:


import { usePayment } from '@appfunnel-dev/sdk'
import { Loading, motion } from '@appfunnel-dev/sdk/elements'
 
function PayButton() {
  const { loading } = usePayment()
 
  return (
    <motion.button
      whileTap={!loading ? { scale: 0.95 } : {}}
      disabled={loading}
      className="w-full py-4 bg-blue-600 text-white font-bold rounded-2xl"
    >
      {loading ? <Loading size="xs" color="#fff" /> : 'Pay now'}
    </motion.button>
  )
}