进度环

v-progress-circular 组件用于将数据环传递给用户。 也可以将其置于不确定状态来描述加载。

用例

默认情况下，进度圆环使用应用程序辅助色彩。

template style

  1. <template>
  2.   <div class="text-center">
  3.     <v-progress-circular :value="20"></v-progress-circular>
  5.     <v-progress-circular :value="40"></v-progress-circular>
  7.     <v-progress-circular :value="60"></v-progress-circular>
  9.     <v-progress-circular :value="80"></v-progress-circular>
  11.     <v-progress-circular :value="100"></v-progress-circular>
  12.   </div>
  13. </template>
  1. <style scoped>
  2. .v-progress-circular {
  3.   margin: 1rem;
  4. }
  5. </style>

Circular（进度环） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Circular（进度环） - 图2

实战场

template script

  1. <template>
  2.   <v-row justify="center" align="center">
  3.     <div class="text-center ma-12">
  4.       <v-progress-circular
  5.         :indeterminate="indeterminate"
  6.         :rotate="rotate"
  7.         :size="size"
  8.         :value="value"
  9.         :width="width"
  10.         color="light-blue"
  11.       >{{ value }}</v-progress-circular>
  12.     </div>
  14.     <v-row>
  15.       <v-col cols="12" md="3" lg="2">
  16.         <v-text-field
  17.           v-model="rotate"
  18.           class="mx-4"
  19.           label="Rotate"
  20.           max="360"
  21.           min="0"
  22.           step="1"
  23.           style="width: 125px"
  24.           type="number"
  25.           @keydown="false"
  26.         ></v-text-field>
  27.       </v-col>
  28.       <v-col cols="12" md="3" lg="2">
  29.         <v-text-field
  30.           v-model="size"
  31.           class="mx-4"
  32.           label="Size - px"
  33.           max="100"
  34.           min="1"
  35.           step="1"
  36.           style="width: 125px"
  37.           type="number"
  38.           @keydown="false"
  39.         ></v-text-field>
  40.       </v-col>
  41.       <v-col cols="12" md="3" lg="2">
  42.         <v-text-field
  43.           v-model="value"
  44.           class="mx-4"
  45.           label="Value - %"
  46.           max="100"
  47.           min="1"
  48.           step="1"
  49.           style="width: 125px"
  50.           type="number"
  51.           @keydown="false"
  52.         ></v-text-field>
  53.       </v-col>
  54.       <v-col cols="12" md="3" lg="2">
  55.         <v-text-field
  56.           v-model="width"
  57.           class="mx-4"
  58.           label="Width - px"
  59.           max="100"
  60.           min="1"
  61.           step="1"
  62.           style="width: 125px"
  63.           type="number"
  64.           @keydown="false"
  65.         ></v-text-field>
  66.       </v-col>
  67.       <v-col cols="12" md="3" lg="2">
  68.         <v-switch v-model="indeterminate" label="Toggle indeterminate" class="mx-4"></v-switch>
  69.       </v-col>
  70.     </v-row>
  71.   </v-row>
  72. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       indeterminate: false,
  5.       rotate: 0,
  6.       size: 32,
  7.       value: 0,
  8.       width: 4,
  9.     }),
  10.   }
  11. </script>

Circular（进度环） - 图3

示例

下面是一些简单到复杂的例子。

色彩

可以使用 color 属性将其他颜色应用于 v-progress-circular。

template style

  1. <template>
  2.   <div class="text-center">
  3.     <v-progress-circular
  4.       :value="100"
  5.       color="blue-grey"
  6.     ></v-progress-circular>
  8.     <v-progress-circular
  9.       :value="80"
  10.       color="deep-orange lighten-2"
  11.     ></v-progress-circular>
  13.     <v-progress-circular
  14.       :value="60"
  15.       color="brown"
  16.     ></v-progress-circular>
  18.     <v-progress-circular
  19.       :value="40"
  20.       color="lime"
  21.     ></v-progress-circular>
  23.     <v-progress-circular
  24.       :value="20"
  25.       color="indigo darken-2"
  26.     ></v-progress-circular>
  27.   </div>
  28. </template>
  1. <style scoped>
  2. .v-progress-circular {
  3.   margin: 1rem;
  4. }
  5. </style>

Circular（进度环） - 图4

不定圆环

使用 indeterminate 属性，一个 v-progress-circular 继续无限地进行动画处理。

template style

  1. <template>
  2.   <div class="text-center">
  3.     <v-progress-circular
  4.       indeterminate
  5.       color="primary"
  6.     ></v-progress-circular>
  8.     <v-progress-circular
  9.       indeterminate
  10.       color="red"
  11.     ></v-progress-circular>
  13.     <v-progress-circular
  14.       indeterminate
  15.       color="purple"
  16.     ></v-progress-circular>
  18.     <v-progress-circular
  19.       indeterminate
  20.       color="green"
  21.     ></v-progress-circular>
  23.     <v-progress-circular
  24.       indeterminate
  25.       color="amber"
  26.     ></v-progress-circular>
  27.   </div>
  28. </template>
  1. <style scoped>
  2. .v-progress-circular {
  3.   margin: 1rem;
  4. }
  5. </style>

Circular（进度环） - 图5

Black Vuetify Cap

An updated classic that won’t break the bank! This hat perfectly combines style and function.

ads by Vuetify

](https://store.vuetifyjs.com/product/black-vuetify-logo-cap?ref=vuetifyjs.com)

大小和宽度

size 和 width 属性使您可以轻松更改 v-progress-circular 组件的大小和宽度。

template style

  1. <template>
  2.   <div class="text-center">
  3.     <v-progress-circular
  4.       :size="50"
  5.       color="primary"
  6.       indeterminate
  7.     ></v-progress-circular>
  9.     <v-progress-circular
  10.       :width="3"
  11.       color="red"
  12.       indeterminate
  13.     ></v-progress-circular>
  15.     <v-progress-circular
  16.       :size="70"
  17.       :width="7"
  18.       color="purple"
  19.       indeterminate
  20.     ></v-progress-circular>
  22.     <v-progress-circular
  23.       :width="3"
  24.       color="green"
  25.       indeterminate
  26.     ></v-progress-circular>
  28.     <v-progress-circular
  29.       :size="50"
  30.       color="amber"
  31.       indeterminate
  32.     ></v-progress-circular>
  33.   </div>
  34. </template>
  1. <style scoped>
  2. .v-progress-circular {
  3.   margin: 1rem;
  4. }
  5. </style>

Circular（进度环） - 图6

旋转

rotate 属性使您能够自定义 v-progress-circular 的原点。

template script style

  1. <template>
  2.   <div class="text-center">
  3.     <v-progress-circular
  4.       :rotate="360"
  5.       :size="100"
  6.       :width="15"
  7.       :value="value"
  8.       color="teal"
  9.     >
  10.       {{ value }}
  11.     </v-progress-circular>
  13.     <v-progress-circular
  14.       :rotate="-90"
  15.       :size="100"
  16.       :width="15"
  17.       :value="value"
  18.       color="primary"
  19.     >
  20.       {{ value }}
  21.     </v-progress-circular>
  23.     <v-progress-circular
  24.       :rotate="90"
  25.       :size="100"
  26.       :width="15"
  27.       :value="value"
  28.       color="red"
  29.     >
  30.       {{ value }}
  31.     </v-progress-circular>
  33.     <v-progress-circular
  34.       :rotate="180"
  35.       :size="100"
  36.       :width="15"
  37.       :value="value"
  38.       color="pink"
  39.     >
  40.       {{ value }}
  41.     </v-progress-circular>
  42.   </div>
  43. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         interval: {},
  6.         value: 0,
  7.       }
  8.     },
  9.     beforeDestroy () {
  10.       clearInterval(this.interval)
  11.     },
  12.     mounted () {
  13.       this.interval = setInterval(() => {
  14.         if (this.value === 100) {
  15.           return (this.value = 0)
  16.         }
  17.         this.value += 10
  18.       }, 1000)
  19.     },
  20.   }
  21. </script>
  1. <style scoped>
  2. .v-progress-circular {
  3.   margin: 1rem;
  4. }
  5. </style>

Circular（进度环） - 图7