Loading

<template>
<article>
  <veui-loading
    class="loading"
    loading
    ui="normal"
  >
    Normal
  </veui-loading>
  <veui-loading
    class="loading"
    loading
    ui="strong"
  >
    Strong
  </veui-loading>
  <veui-loading
    class="loading reverse"
    loading
    ui="reverse"
  >
    Reverse
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.loading {
  margin-left: 1em;
}

.reverse {
  background: #ccc;
  padding: 8px;
}
</style>

<template>
<article>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="strong s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse l"
    >
      l
    </veui-loading>
  </div>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.loading {
  margin-left: 1em;
}

.container {
  margin-bottom: 2em;
}
</style>

<template>
<article class="container">
  <veui-loading
    class="loading"
    loading
  >
    Horizontal
  </veui-loading>
  <veui-loading
    loading
    ui="vertical"
  >
    Vertical
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: flex-end;

  .loading {
    margin-left: 1em;
  }
}
</style>

<template>
<article>
  <section>
    Custom icon-star:
    <veui-loading
      loading
      ui="strong"
    >
      <template #spinner>
        <veui-icon
          spin
          name="star"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-sync:
    <veui-loading loading>
      <template #spinner>
        <veui-icon
          spin
          name="sync"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-clockwise:
    <veui-loading
      loading
      ui="reverse"
      class="reverse"
    >
      <template #spinner>
        <veui-icon
          spin
          name="clockwise"
        />
      </template>
      loading...
    </veui-loading>
  </section>
</article>
</template>

<script>
import { Icon, Loading } from 'veui'
import 'veui-theme-dls-icons/sync'
import 'veui-theme-dls-icons/star'
import 'veui-theme-dls-icons/clockwise'

export default {
  components: {
    'veui-icon': Icon,
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.section {
  margin-bottom: 20px;
}
</style>