Skip to main content

Loading spinner

Give feedback to the user that something is happening or that information is being retrieved from the server.

Adding the hide class will allow you to place the loading markup in the DOM on pageload for you to toggle with javascript.

Loading...

Basic usage​

{{ html.loading() }}

Helper options​

You can configure this helper using the common helper options.

Centering within a container​

Loading...

Basic usage​

{{
  html.loading({
    'type': 'block'
  })
}}

Large spinner​

When a spinner is used to indicate a large section of an interface is still loading it may be more you can use the large spinner to be more obvious.

Loading...
{{
    html.loading({
        'class': 'loading--large',
        'type': 'block'
    })
}}

Custom message​

A line of text can be included to tell the user what’s happening.

Loading...Loading your cases...
{{
  html.loading({
    'class': 'loading--large',
    'message': 'Loading your cases...',
    'type': 'block'
  })
}}