carbon-components/src/components/loading/README.md

Carbon Components is a component library for IBM Cloud

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

```javascript
import { Loading } from 'carbon-components';
```

##### With pre-build bundle (`carbon-components.min.js`)

```javascript
var Loading = CarbonComponents.Loading;
```

#### Instantiating

```javascript
// `#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

```javascript
// `#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

```javascript
// `#my-loading` is an element with `[data-loading]` attribute
Loading.create(document.getElementById('my-loading'), { active: true });
```