Circle - Vant 4 🎯
🔄 Circle
Beautiful circular progress indicators with smooth animations
🌟 Introduction
Create stunning circular progress bars with gradient colors and smooth animations. Perfect for showing loading states, progress tracking, and visual feedback in your mobile applications.
📦 Installation
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from'vue'; import { Circle } from'vant'; const app = createApp(); app.use(Circle);🎨 Usage Examples
🌟 Basic Usage
Create a simple circular progress indicator:
import { ref, computed } from'vue'; exportdefault { setup() { const currentRate = ref(0); const text = computed(() => currentRate.value.toFixed(0) + '%'); return { text, currentRate, }; }, };📏 Custom Width
Control the thickness of your progress ring with precision! The stroke-width prop determines the visual weight of your progress indicator.
The unit of stroke-width is not px, if you want to know the relationship between stroke-width and px, you can use the following formula to calculate:
// viewBox size for SVGconst viewBox = 1000 + strokeWidth; // The width of the Circle component, the default is 100pxconst circleWidth = 100; // Final rendered progress bar width (px)const pxWidth = (strokeWidth * circleWidth) / viewBox;🎨 Custom Color
Make your progress ring match your brand colors perfectly:
🌈 Gradient
Create eye-catching gradient effects for a modern look:
import { ref } from'vue'; exportdefault { setup() { const currentRate = ref(0); const gradientColor = { '0%': '#3fecff', '100%': '#6149f6', }; return { currentRate, gradientColor, }; }, };↺ Counter Clockwise
Reverse the animation direction for unique visual effects:
📐 Custom Size
Scale your progress indicator to fit any design requirement:
🧭 Start Position
Control where your progress animation begins:
🔧 API Reference
🎛️ Props
Configure your circular progress component with these powerful options:
| Attribute | Description | Type | Default |
|---|---|---|---|
| v-model:current-rate | Current rate | number | - |
| rate | Target rate | *number | string* |
| size | Circle size | *number | string* |
| color | Progress color, passing object to render gradient | *string | object* |
| layer-color | Layer color | string | white | | fill | Fill color | string | none | | speed | Animate speed��rate/s�� | number | string | 0 | | text | Text | string | - | | stroke-width | Stroke width | number | string | 40 | | stroke-linecap | Stroke linecap, can be set to square``butt | string | round | | clockwise | Whether to be clockwise | boolean | true | | start-position | Progress start position, can be set to left��right��bottom | CircleStartPosition | top |
🎰 Slots
Customize the content inside your progress circle:
| Name | Description |
|---|---|
| default | custom text content |
📝 Types
Access comprehensive TypeScript definitions for better development experience:
importtype { CircleProps, CircleStartPosition } from'vant';🎨 Theming
🎯 CSS Variables
Customize the circle appearance to match your design system perfectly:
| Name | Default Value | Description |
|---|---|---|
| --van-circle-size | 100px | - |
| --van-circle-color | var(--van-primary-color) | - |
| --van-circle-layer-color | var(--van-white) | - |
| --van-circle-text-color | var(--van-text-color) | - |
| --van-circle-text-font-weight | var(--van-font-bold) | - |
| --van-circle-text-font-size | var(--van-font-size-md) | - |
| --van-circle-text-line-height | var(--van-line-height-md) | - |
📚 Related Docs
Explore more components and resources to enhance your development experience:
Progress & Loading Components
- Progress - Linear progress bars
- Loading - Loading spinners and indicators
- Skeleton - Content placeholder while loading
Display Components
Layout & Interaction
Development Resources
ConfigProvider - Global configuration and theming
Locale - Internationalization support
External Links
- SVG Path Documentation - Understanding SVG paths
- CSS Custom Properties - Learn about CSS variables