# CustomLoading

- category: UI
- chinese: 加载中
- type: UI组件

---

## 何时使用

需要定制 toast 的文案、Icon 时


## API
参数 | 说明 | 类型 | 默认值
-----|-----|-----|-----
image|图片，gif 版本|{{uri:''},style:{}}|无
onHide | 关闭时触发回调 | function |
onShow | 打开后后触发回调 | function | false
style | mask 样式 | object | {}
animate | 是否开启渐显渐隐动画 | boolean | true


## demo

````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.closeHandler = this.closeHandler.bind(this);
    this.showLoading = this.showLoading .bind(this);
  }
  showLoading(){
    this.loading.wrappedInstance.show();
    setTimeout(()=>{
      this.loading.wrappedInstance.hide();
    },2000);
  }
  closeHandler(){
    console.log('toast closed');
  }
  render() {
    return (
      <Page title="custom-loading">
          <Page.Intro main="basic" sub="basic-sub"/>
          <Button onPress={this.showLoading} type="primary">点我</Button>
          <CustomLoading
            ref={(n)=>{this.loading = n;}}
            image={{
              uri:
                '//img.alicdn.com/tfs/TB1uC0kgLDH8KJjy1XcXXcpdXXa-256-256.gif',
              style: {
                width: 90,
                height: 90,
              },
            }}
            style={{backgroundColor:'transparent'}}
            onHide={this.closeHandler}
          />
      </Page>
    );
  }
}

render(<App/>);
```