carbon-components
Version:
Carbon Components is a component library for IBM Cloud
69 lines (49 loc) • 2.78 kB
Markdown
### 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 });
```