Progress

Demos

66.6%
<template>
<article>
  <section>
    <veui-number-input
      v-model="value"
      :min="0"
      :max="100"
    />
  </section>
  <section>
    <veui-checkbox v-model="desc">
      Description
    </veui-checkbox>
    <veui-checkbox
      v-model="autoSucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
    <veui-checkbox
      v-model="type"
      true-value="circular"
      false-value="bar"
    >
      Circular
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      :type="type"
      :value="value"
      :desc="desc"
      :auto-succeed="autoSucceed"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

<script>
import { Progress, NumberInput, Checkbox } from 'veui'

export default {
  components: {
    'veui-progress': Progress,
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      type: 'bar',
      value: 66.6,
      desc: true,
      autoSucceed: true
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
tinyTiny style.
fluidFluid layout for progress bar.
typestring'bar'The type of the progress. Available values are bar/circular, denoting progress bar and progress circle respectively.
descbooleanfalseThe description of the progress.
valuenumber0Progress value.
minnumber0Minimum value.
maxnumber1Max value.
decimal-placenumber0Decimal place for the progress value.
statusstring-

.sync

The status of the progress. Available values are success/alert, denoting success and alert status respectively.

autosucceedboolean|number-Whether automatically enter the success status when the progress reaches the maximum value. true denotes entering immediately, while number values denotes the delay in milliseconds before entering the success status.

Slots

NameDescription
default

The description content. Displays the percentage value of the progress by default.

NameTypeDescription
percentnumberThe percentage value of the progress.
valuenumberThe value of the progress, same as the value prop.
statusstringThe status of the progress, same as the status prop.