NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Spinner

There is a breaking change to this component in the next version of NUI Widgets.
  • The underlying html of this component changed in the next major version of NUI-Widgets.
import Spinner from '@concur/nui-widgets/lib/Spinner/Spinner';

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

Default

Standard spinner used for most cases and components.

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

Types

There are four types of spinners: 'inline', 'block', 'fullPage' and 'fullScreen'. Use the type property to specify the appropriate Spinner type.

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 type='inline' property to define an inline spinner. When using an inline spinner, the message will be hidden. Inline spinners do not have a mask.

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

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

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

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 type='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.

Full Page

Full-page spinners are used to prevent user interaction with the entire app (but not shell). The site Header and Footer are still clickable when using the Full Page spinner. Use the type='fullPage' property to define a full-page spinner.

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

Full Screen

Full-screen spinners are used to prevent user interaction with the entire app and shell. The site Header and Footer are not clickable when using the full-screen spinner. Use the type='fullScreen' property to define a full-screen spinner.

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 />

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 />

Usage

Properties

Property Type Default Description
message String Required The message that will be displayed/read to the user when the spinner is invoked.
className String   Custom classes to be added to the wrapping <div>.
wheelClassName String   Custom classes to be added to the underlying <div> that wraps the spinner svg.
content Node   Content to render under the spinner.
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.
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'.
type String   Spinner type. Options are 'block', 'inline', 'fullPage' and 'fullScreen'.
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.