Loading

Loading without overlay

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

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="26.8125" />
    <circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125" />
  </svg>
</div>

Edit this page on GitHub

Components: List

Loading: Usage