Loading
Loading
Loading without overlay
Code:
<!--
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.
-->
<div data-loading class="bx--loading">
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<title>Loading</title>
<circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
</svg>
</div>
Loading small
Code:
<!--
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.
-->
<div data-loading class="bx--loading bx--loading--small">
<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
<title>Loading</title>
<circle class="bx--loading__background" cx="0" cy="0" r="26.8125" />
<circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125" />
</svg>
</div>
Documentation
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 });