Progress

Examples

Progress bar

Progress

Show description Autosucceed Indeterminate

66.6%

<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      class="slider"
      :min="0"
      :step="0.1"
      :max="100"
    />
  </section>
  <section class="settings">
    <veui-checkbox v-model="desc">
      Show description
    </veui-checkbox>
    <veui-checkbox
      v-model="autosucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
    >
      Indeterminate
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      :value="value"
      :desc="desc"
      :autosucceed="autosucceed"
      :indeterminate="indeterminate"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-progress': Progress,
    'veui-slider': Slider,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      type: 'bar',
      value: 66.6,
      desc: true,
      autosucceed: 200,
      indeterminate: false
    }
  }
}
</script>

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

.settings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider {
  width: 200px;
}
</style>

Progress circle

Progress

Show description Autosucceed

66.6%

Edit this demo on GitHubEdit

<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      class="slider"
      :min="0"
      :step="0.1"
      :max="100"
    />
  </section>
  <section class="settings">
    <veui-checkbox v-model="desc">
      Show description
    </veui-checkbox>
    <veui-checkbox
      v-model="autosucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      type="circular"
      :value="value"
      :desc="desc"
      :autosucceed="autosucceed"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-progress': Progress,
    'veui-slider': Slider,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      value: 66.6,
      desc: true,
      autosucceed: 200
    }
  }
}
</script>

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

.settings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider {
  width: 200px;
}
</style>

Size variants

Available size variants for the ui prop: xs / s / m.

Fluid layout (bar)

71%

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="fluid">
      Fluid layout (bar)
    </veui-checkbox>
  </section>
  <section class="bar">
    <veui-progress
      :ui="`m ${fluid ? 'fluid' : ''}`"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      :ui="`s ${fluid ? 'fluid' : ''}`"
      status="success"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      :ui="`xs ${fluid ? 'fluid' : ''}`"
      status="error"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
  </section>
  <section class="circular">
    <veui-progress
      type="circular"
      ui="m"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      type="circular"
      ui="s"
      status="success"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      type="circular"
      ui="xs"
      status="error"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-progress': Progress,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      fluid: false
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}

.bar,
.circular {
  display: flex;
  gap: 20px;
}

.bar {
  flex-direction: column;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`fluid`	Fluid style of bar progress.
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.

type string 'bar' Type of progress bar. Available values are bar / circular, which are for bar and circular progress bars respectively.

desc boolean false Whether to display text hint.

value number 0 Progress value.

min number 0 Minimum value.

max number 1 Maximum value.

decimal-place number 0 Number of decimal places to keep.

status

string

.sync

Progress status. Available values are success / error, which represent the success and error status respectively.

autosucceed boolean | number - Whether to automatically enter the success state when the progress value reaches the maximum. true means directly entering the success state. If it is of type number, it means the number of milliseconds to wait before switching to the success state after reaching the maximum value.

indeterminate boolean false Whether the progress is indeterminate. Currently only effective when type is bar.

Slots

Name Description

default

Can be used to customize the content of the text hint area.

Default content: completion percentage.

Name	Type	Description
`percent`	`number`	Percentage of progress completion.
`value`	`number`	Progress value, same as `value` prop.
`status`	`string`	Progress status, same as `status` prop.

after Can be used to customize the content after the text hint area. Slot props refer to the default slot.

Edit this page on GitHubEdit