See what's coming soon with Carbon V10-beta.

Skip to main content
Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.

Experimental Loading

Loading

Vanilla JS

<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>

Experimental Loading

Loading

Vanilla JS

<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 });