Skip to main content
Inline loading spinners are used when performing actions. They help notify users that their action is being processed.

Inline loading

  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 data-inline-loading-finished hidden class="bx--inline-loading__checkmark-container bx--inline-loading__svg" xmlns="" 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>
  <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>
  <button data-inline-loading-demo-button class="bx--btn bx--btn--primary">Toggle state</button>



Getting component class reference

import { InlineLoading } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var InlineLoading = CarbonComponents.InlineLoading;


// `#my-inline-loading` is an element with `[data-inline-loading]` attribute

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


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