VEUI

VEUI on GitHub
Play!中文

LoadingBar

Examples

Size variants

Available ui prop values: xs / s / m.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-switch v-model="loading">
      Loading
    </veui-switch>
  </section>
  <section class="bars">
    <veui-loading-bar
      :loading="loading"
      ui="m"
    />
    <veui-loading-bar
      :loading="loading"
      ui="s"
    />
    <veui-loading-bar
      :loading="loading"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { Switch, LoadingBar } from 'veui'

export default {
  components: {
    'veui-switch': Switch,
    'veui-loading-bar': LoadingBar
  },
  data () {
    return {
      loading: false
    }
  }
}
</script>

<style lang="less" scoped>
article,
.bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bars {
  width: 50%;
  height: 80px;
}
</style>

API

Props

NameTypeDefaultDescription
uistring-

Predefined styles. A combination of enumerated values separated by space.

ValueDescription
xsExtra small size style.
sSmall size style.
mMedium size style.
loadingbooleanfalseWhether it is in the loading state.
Edit this page on GitHubEdit
© Baidu, Inc. 2024