Spinner

import { Spinner } from '@concur/nui-widgets';

The Spinner component provides feedback to a user during the loading of another component or page. This component is accessible and is available in different sizes.

In order for this spinner to be used with the included mask, it must be placed inside an HTML element that is relatively positioned. The .cnqr-position-relative CSS class can be used to set relative positioning on any element. For example, the spinner might be inside an application’s parent HTML container or inside a section on the page.

Examples

Full Page

Full-page spinners are used to prevent user interaction with the entire page until it is hidden. Use the fullPage property to define a full-page spinner.

<Spinner
    fullPage
    message='We are processing your request, please wait'
    visible />

Sizes

There are three supported spinner sizes: 'lg', 'md' (the default) and 'sm' . Use the size property to set the appropriate size. These spinners are for individual components or sections of a page that will not prevent user interaction with other components or sections.

<Spinner
    message='Loading...'
    size='lg'
    visible />

<Spinner
    message='Loading...'
    visible />

<Spinner
    message='Loading...'
    size='sm'
    visible />

Inline

Inline spinners show a user that activity is occurring within a component, but will not prevent any user interaction with that component or page. Use the inline property to define an inline spinner.

<Spinner
    inline
    message='Loading...'
    size='lg'
    visible />
<span>This is a large inline spinner</span>

<Spinner
    inline
    message='Loading...'
    visible />
<span>This is an inline spinner</span>

<Spinner
    inline
    message='Loading...'
    size='sm'
    visible />
<span>This is a small inline spinner</span>

Inverted

Inverted spinners are useful to display over dark color backgrounds/masks. Use the inverted property to define an inverted spinner.

NOTE: To maintain consistency across all of SAP Concur’s products, use the default spinner for most cases.

<Spinner
    inverted
    message='Loading...'
    size='lg'
    visible />

<Spinner
    inverted
    message='Loading...'
    visible />

<Spinner
    inverted
    message='Loading...'
    size='sm'
    visible />

Block

Block-level spinners are specialized versions of inline spinners (but have a block-level display). They will respect the size and inverted properties. The rendered spinner will have dimensions such that it flows like other relatively-positioned content on a page. Use the block property to define a block-level spinner.

NOTE: A block-level spinner is meant to be used in place of content rather than to overlay it. Use this option on an empty page or empty modal while the content is still being fetched.

Usage

Properties

Property Type Default Description
message String Required The message that will be displayed/read to the user when the spinner is invoked.
block Boolean false Renders the spinner as a block-level element (rather than absolutely-positioned). The rendered spinner will have dimensions such that it flows like other relatively-positioned content on a page. NOTE: A block-level spinner is meant to be used in place of content rather than to overlay it. Use this option on an empty page or empty modal while the content is still being fetched.
fullPage Boolean false Sets the spinner to cover the full page.
hasMask Boolean true Determines whether a “mask” appears below the spinner to prevent user interaction with the portion of the page to which the spinner is applied.
hideMessage Boolean false Hides the message text from view, but does not remove accessibility attributes. NOTE: The message property is still required even if it will be hidden from view to meet accessibility requirements.
id String   The DOM id of the spinner <div> element. If left blank, a random value will be generated for accessibility purposes.
inline Boolean false Enables inline rendering. When true, the message will be hidden and hasMask will be ignored. Inline spinners do not have a mask.
inverted Boolean false When true, the spinner will render with inverted colors and change the mask color to @brand-secondary (for non-inline spinners). NOTE: To maintain consistency across all of SAP Concur’s products, use the default spinner for most cases.
maskColor String 'gray' The base color of the mask below the spinner. Options are 'gray', 'white'.
size String 'md' Spinner size. Options are 'lg', 'md', 'sm'.
visible Boolean false Visibility of the spinner. Typically, a spinner is added for a component or page and is not visible and gets set to visible when necessary.