Loading spinner
Supported products
- Central CMS
- Central Forms
- Central Connect
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
- Twig
- HTML
{{ html.loading() }}
<span class="loading"><i>Loading...</i></span>
Helper options
You can configure this helper using the common helper options.
Centering within a container
Loading...
Basic usage
- Twig
- HTML
{{
html.loading({
'type': 'block'
})
}}
<div class="loading-block">
<span class="loading"><i>Loading...</i></span>
</div>
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...
- Twig
- HTML
{{
html.loading({
'class': 'loading--large',
'type': 'block'
})
}}
<div class="loading-block">
<span class="loading"><i>Loading...</i></span>
</div>
Custom message
A line of text can be included to tell the user what’s happening.
Loading...
- Twig
- HTML
{{
html.loading({
'class': 'loading--large',
'message': 'Loading your cases...',
'type': 'block'
})
}}
<div class="loading-block">
<div class="loading-block">
<span class="loading loading--large"><i>Loading...</i></span>
<span class="loading-block__message">Loading your cases...</span>
</div>
</div>