SCSS
Modifiers
Use these modifiers with .bx--loading class.
| Selector |
Description |
.bx--loading--small |
Class for small loading spinner |
.bx--loading--stop |
Class for stopping the loading animation |
.bx--loading-overlay--stop |
Class for hiding the overlay |
JavaScript
Getting component class reference
ES2015
import { Loading } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Loading = CarbonComponents.Loading;
Instantiating
// `#my-loading` is an element with `[data-loading]` attribute
Loading.create(document.getElementById('my-loading'));
Public Methods
| Name |
Params |
Description |
release |
|
Deletes the instance |
set |
active : Boolean |
Sets the active/inactive state |
toggle |
|
Toggles active/inactive state |
isActive |
|
Returns current state |
end |
|
Runs end animation and then delete the element from the DOM |
Example - Activating the loading spinner
// `#my-loading` is an element with `[data-loading]` attribute
var loadingInstance = Loading.create(document.getElementById('my-loading'));
loadingInstance.set(true);
Options
| Option |
Default Selector |
Description |
selectorInit |
[data-loading] |
The CSS selector to find the loading component |
selectorLoadingOverlay |
.bx--loading-overlay |
The selector for the loading overlay. |
classLoadingOverlayStop |
bx--loading-overlay--stop |
The class for the loading overlay's stopped state. |
active |
true |
A boolean value representing the initial state of the component. |
Example - Activating upon instantiating
// `#my-loading` is an element with `[data-loading]` attribute
Loading.create(document.getElementById('my-loading'), { active: true });