Spinner

import { Spinner } from '@raystack/apsara';

<Spinner />

<Spinner size={1} />
<Spinner size={2} />
<Spinner size={3} />
<Spinner size={4} />
<Spinner size={5} />
<Spinner size={6} />

<Spinner color="default" />

<Spinner color="neutral" />

<Spinner color="accent" />

<Spinner color="danger" />

<Spinner color="success" />

<Spinner color="attention" />

import { Button } from '@raystack/apsara';

<Button disabled>
  <Spinner size={2} />
  Loading...
</Button>

<div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
  <Spinner size={4} />
</div>

<div style={{
  position: 'fixed',
  inset: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  background: 'rgba(0, 0, 0, 0.5)'
}}>
  <Spinner size={6} />
</div>

import { Flex, Text } from '@raystack/apsara';

<Flex direction="column" align="center" gap="2">
  <Spinner size={4} />
  <Text>Loading your data...</Text>
</Flex>

function InlineLoader() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
      <Spinner size={1} />
      Processing...
    </span>
  );
}

import { Card } from '@raystack/apsara';

function LoadingCard() {
  return (
    <Card>
      <Flex direction="column" align="center" gap="3" style={{ padding: '2rem' }}>
        <Spinner size={4} color="accent" />
        <Text>Loading content...</Text>
      </Flex>
    </Card>
  );
}

function DataDisplay() {
  const { data, isLoading } = useData();

  if (isLoading) {
    return (
      <Flex justify="center" style={{ padding: '4rem' }}>
        <Spinner size={5} />
      </Flex>
    );
  }

  return <div>{data}</div>;
}

function SubmitButton() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    await submitForm();
    setLoading(false);
  };

  return (
    <Button onClick={handleSubmit} disabled={loading}>
      {loading ? (
        <>
          <Spinner size={2} />
          Submitting...
        </>
      ) : (
        'Submit'
      )}
    </Button>
  );
}