Skip to main content

Spinner

Reference​

  • The Spinner component is a styled <div>.
  • It displays a circular loading spinner with customizable size and colors, animated with a spinning effect.

Props​

  1. spinnerSize

    • Type: string
    • Description: Sets the size (width and height) of the spinner explicitly.

  2. smallest

    • Type: boolean
    • Description: If true, sets the spinner size to 0.8rem.

  3. small

    • Type: boolean
    • Description: If true, sets the spinner size to 1.2rem.

  4. Theme Colors

    • theme.colorPalette.SECONDARY_LIGHTER: Sets the border color for the spinner.
    • theme.colorPalette.SECONDARY_DARK: Sets the border-left color for the spinner to create the spinning effect.

Usage Example​


function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { Spinner } = protrakComponents;
    return(
    <Spinner spinnerSize="3rem" />
    );
}
  • This renders a spinner with a size of 3rem and theme-based colors.