@atlaskit/spinner/dist/types/types.d.ts

A spinner is an animated spinning icon that lets users know content is being loaded.

export type PresetSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
export type Size = PresetSize | number;
export type Appearance = 'inherit' | 'invert';
export type SpinnerProps = {
    /**
     * You can use this to invert the current theme.
     * This is useful when you are displaying a spinner on a background that is not the same background color scheme as the main content.
     */
    appearance?: Appearance;
    /**
     * Delay the intro animation of `Spinner`.
     * This is not to be used to avoid quick flickering of `Spinner`.
     * `Spinner` will automatically fade in and takes ~200ms to become partially visible.
     * This prop can be helpful for **long delays** such as `500-1000ms` for when you want to not
     * show a `Spinner` until some longer period of time has elapsed.
     */
    delay?: number;
    /**
     * An optional `interactionName` used to identify when this component is holding an interaction.
     */
    interactionName?: string;
    /**
     * Describes what the spinner is doing for assistive technologies. For example, "loading", "submitting", or "processing".
     */
    label?: string;
    /**
     * Size of the spinner. The available sizes are `xsmall`, `small`, `medium`, `large`, and `xlarge`. For most use cases, we recommend `medium`.
     */
    size?: Size;
    /**
     * A `testId` prop is provided for specified elements,
     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
     * serving as a hook for automated tests.
     */
    testId?: string;
};