---
nav: default
---
### Loading
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Floading"/>
<a href="demo/#/component/loading" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/loading</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/loading" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group>
      <x-switch
        v-model="show1"
        title="Toggle"
        @on-change="show1change"
      />
    </group>
    <loading
      :show="show1"
      :text="text1"
    />
  </div>
</template>

<script>
import { Loading, Group, XSwitch } from '../components/_index'

export default {
  components: {
    Loading,
    Group,
    XSwitch
  },
  data () {
    return {
      show1: false,
      text1: 'Processing'
    }
  },
  methods: {
    show1change (val) {
      if (val) {
        tick(0, (percent) => {
          if (percent === 100) {
            this.show1 = false
            this.text1 = 'Start processing'
            return
          }
          this.text1 = `${percent}% completed`
        })
      }
    }
  }
}

function tick (i, cb) {
  setTimeout(function () {
    i++
    cb(i)
    if (i < 100) {
      tick(i, cb)
    }
  }, 50)
}
</script>

```

#### Github Issue