# Loading Demo

* order: 0

基础用法

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import { View, Text, Page, Button } from 'weex-nuke';
import CustomLoading from 'nuke-biz-custom-loading';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      number: 9
    };
    this.closeHandler = this.closeHandler.bind(this);
    this.showHandler = this.showHandler.bind(this);
    this.showLoading = this.showLoading.bind(this);
    this.hideLoading = this.hideLoading.bind(this);
  }
  showLoading() {
    this.loading.wrappedInstance.show();
    const that = this;
    setTimeout(() => {
      that.setState({
        number: 222
      });
      that.loading.wrappedInstance.hide();
    }, 3000);
  }
  hideLoading() {
    this.loading.wrappedInstance.hide();
  }

  closeHandler() {
    console.log('loading closed');
    this.setState({
      number: 888
    });
  }
  showHandler() {
    console.log('loading shown');
  }
  render() {
    return (
      <Page title="custom-loading">
        <Page.Intro main="basic" sub="basic-sub" />
        <Text>{this.state.number}</Text>
        <Button
          onPress={this.showLoading}
          type="primary"
          style={{ zIndex: 1000 }}
        >
          打开
        </Button>
        <Button
          onPress={this.hideLoading}
          type="primary"
          style={{ zIndex: 1000 }}
        >
          关闭
        </Button>
        <CustomLoading
          ref={n => {
            this.loading = n;
          }}
          image={{
            uri:
              '//laz-img-cdn.alicdn.com/tfs/TB1ISHWkgvD8KJjy0FlXXagBFXa-200-200.gif',
            style: {
              width: 90,
              height: 90
            }
          }}
          animate={false}
          style={{ backgroundColor: 'transparent' }}
          onHide={this.closeHandler}
          onShow={this.showHandler}
        />
      </Page>
    );
  }
};

render(<App />);
```