Inline loading

Inline loading

Vanilla JS
React Angular Vue CodePen
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.
-->

<!-- 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 class="bx--loading__background" cx="0" cy="0" r="30" />
        <circle class="bx--loading__stroke" cx="0" cy="0" r="30"/>
      </svg>
    </div>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-loading__checkmark-container" hidden="" data-inline-loading-finished="" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"></path><path d="M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z" data-icon-path="inner-path" opacity="0"></path></svg>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-loading--error" hidden="" data-inline-loading-error="" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M2 16A14 14 0 1 0 16 2 14 14 0 0 0 2 16zm23.15 7.75L8.25 6.85a12 12 0 0 1 16.9 16.9zM8.24 25.16a12 12 0 0 1-1.4-16.89l16.89 16.89a12 12 0 0 1-15.49 0z"></path></svg>
  </div>
  <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>
  <p data-inline-loading-text-error hidden class="bx--inline-loading__text">Loading data failed.</p>
</div>
<button data-inline-loading-demo-button class="bx--btn bx--btn--primary">Toggle
  state</button>

Documentation

JavaScript

Getting component class reference

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

Instantiating

// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
InlineLoading.create(document.getElementById('my-inline-loading'));

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')
);
inlineLoadingInstance.setState(InlineLoading.states.FINISHED);

Options

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
Edit this page on GitHub
Previous
Components: Form
Next
Inline loading: Usage