carbon-components/html/inline-loading/inline-loading.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  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="0 0 100 100">
        <circle class="bx--loading__background" cx="50%" cy="50%" r="42" />
        <circle class="bx--loading__stroke" cx="50%" cy="50%" r="42" />
      </svg>
    </div>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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,16H2A14,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,6.84,8.27L23.73,25.16a12,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>