Loading Spinner

Used as a loading indicator when data is being fetched or when a page is loading.

See all the examples and details in the Storybook.

Usage

import { LoadingSpinner } from "@samgl/graffiti-ui";

const MyLoadingSpinner = () => {
  return <LoadingSpinner $size="3rem" $ringWidth="0.25rem" $arcColor="#f00" />;
};

Props

Prop	Type	Default	Optional	Description
$size	string		✅	The size of the loading spinner.
$ringWidth	string		✅	The thickness of the spinner.
$arcColor	string		✅	The colour of the spinning section.
$ringColor	string		✅	The colour of non-spinning section.
className	string		✅	The class name of the component, generally used when extending the component with a styled component.