Circle

introduce

A circular progress bar component that supports progress gradient animation.

Basic usage

The rate attribute represents the target progress of the progress bar, and v-model:current-rate represents the real-time progress during the animation. When rate changes, v-model:current-rate will change at speed until it reaches the value set by rate.

<z-circle
   v-model:current-rate="currentRate1"
   :rate="rate"
   :speed="100"
   :text="currentRate1.toFixed(0) + '%'"
/>

import { ref } from 'vue'
const rate = ref(70)
const currentRate1 = ref(0)

Width customization

Control the width of the progress bar through the stroke-width property.

<z-circle
   v-model:current-rate="currentRate3"
   :rate="rate"
   :speed="100"
   :stroke-width="10"
   text="Customized width"
/>

Color customization

Use the color property to control the progress bar color, and the layer-color property to control the track color.

<z-circle
   v-model:current-rate="currentRate3"
   color="#ee0a24"
   :rate="rate"
   layer-color="#ebedf0"
   :speed="100"
   text="Color customization"
/>

Gradient color

The color property supports passing in an object format to define gradient colors.

<z-circle
   v-model:current-rate="currentRate"
   :rate="rate"
   :speed="100"
   :color="gradientColor"
   text="gradient color"
/>

const gradientColor = {
   '0%': '#3fecff',
   '100%': '#6149f6'
}

Counterclockwise

Set clockwise to false and progress will start in a counter-clockwise direction.

<z-circle
   v-model:current-rate="currentRate4"
   color="#07c160"
   :rate="rate"
   :speed="100"
   :clockwise="false"
   text="Counterclockwise"
/>

Size customization

Set the ring diameter via the size property.

<z-circle
   v-model:current-rate="currentRate4"
   color="#7232dd"
   :rate="rate"
   :speed="100"
   :size="140"
   text="Customized size"
/>

starting point

The progress bar starts from the top by default, and the starting position can be set through the start-position property.

<z-circle
   v-model:current-rate="currentRate"
   :rate="rate"
   text="left"
   start-position="left"
/>
<z-circle
   v-model:current-rate="currentRate"
   :rate="rate"
   text="right"
   start-position="right"
/>
<z-circle
   v-model:current-rate="currentRate"
   :rate="rate"
   text="bottom"
   start-position="bottom"
/>

Props

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.