Spinner

Indicates that an action is in progress and that the user should wait.

The Spinner indicates that content or an action is loading. It is built with Chakra SVGs and comes in three sizes.

Base example

import { Spinner } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Spinner />;
}

Sizes

The Spinner comes in three sizes: sm, md (default), and lg.

import { Spinner, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack direction="row" alignItems="center" gap="16px">
      <Spinner size="sm" />
      <Spinner />
      <Spinner size="lg" />
    </Stack>
  );
}