Inline loading spinners are used when performing actions. They help notify users that their action is being processed.
Inline loading
Loading data...
Data loaded.
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<!-- Loading Success State -->
<div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
<div class="bx--inline-loading__animation">
<div data-inline-loading-spinner class="bx--loading bx--loading--small">
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<circle cx="0" cy="0" r="37.5" />
</svg>
</div>
<svg data-inline-loading-finished hidden class="bx--inline-loading__checkmark-container bx--inline-loading__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
</svg>
</div>
<p data-inline-loading-text-active class="bx--inline-loading__text">Loading data...</p>
<p data-inline-loading-text-finished hidden class="bx--inline-loading__text">Data loaded.</p>
</div>
<button data-inline-loading-demo-button class="bx--btn bx--btn--primary">Toggle state</button>
Documentation
JavaScript
Getting component class reference
ES2015
import { InlineLoading } from 'carbon-components';
With pre-build bundle (carbon-components.min.js
)
var InlineLoading = CarbonComponents.InlineLoading;
Instantiating
// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
InlineLoading.create(document.getElementById('my-inline-loading'));
Static properties
Name | Type | Description |
---|---|---|
states | Object | The loading states. Contains INACTIVE , ACTIVE and FINISHED properties. |
Public Methods
Name | Params | Description |
---|---|---|
release |
Deletes the instance | |
setState |
state : string |
Sets the active/inactive/finished state |
Example - Transitioning the loading spinner to the finished state
// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
var inlineLoadingInstance = InlineLoading.create(document.getElementById('my-inline-loading'));
inlineLoadingInstance.setState(InlineLoading.states.FINISHED);
Options
Option | Default Selector | Description |
---|---|---|
selectorInit |
[data-inline-loading] |
The CSS selector to find the inline loading components |
selectorSpinner |
[data-inline-loading-spinner] |
The CSS selector to find the spinner |
selectorFinished |
[data-inline-loading-finished] |
The CSS selector to find the "finished" icon |
selectorTextActive |
[data-inline-loading-text-active] |
The CSS selector to find the text describing the active state |
selectorTextFinished |
[data-inline-loading-text-finished] |
The CSS selector to find the text describing the finished state |
classLoadingStop |
.bx--loading--stop |
The CSS class for spinner's stopped state |