Loading

Loading

Loading
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 class="bx--loading-overlay">
<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>
</div>

Loading without overlay

Loading
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

Loading
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="37.5" />
    <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
  </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 });