uniapp圆形加载
uniapp 圆形加载实现方法
使用内置组件实现
uniapp提供了progress组件，可以通过设置stroke-width和color属性实现圆形加载效果。
<progress
percent="50"
stroke-width="10"
activeColor="#4cd964"
backgroundColor="#e5e5e5"
active
></progress>使用CSS自定义样式
通过CSS可以实现更灵活的圆形加载动画效果。
<template>
<view class="circle-progress">
<view class="progress-bar"></view>
</view>
</template>
<style>
.circle-progress {
width: 100px;
height: 100px;
position: relative;
}
.progress-bar {
width: 100%;
height: 100%;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>使用第三方组件库
uniapp生态中有多个UI组件库提供圆形加载组件，如uView、ColorUI等。
<template>
<u-circle-progress
:percent="70"
:width="150"
:border-width="12"
active-color="#2979ff"
></u-circle-progress>
</template>SVG实现方案
使用SVG可以创建更精细的圆形进度条，支持渐变等效果。
<template>
<view>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="45"
fill="none"
stroke="#e5e5e5"
stroke-width="10"
/>
<circle
cx="50"
cy="50"
r="45"
fill="none"
stroke="#4cd964"
stroke-width="10"
stroke-dasharray="283"
stroke-dashoffset="141.5"
/>
</svg>
</view>
</template>注意事项
- 小程序平台对CSS动画支持有限，需测试兼容性
- 使用第三方组件时需先安装对应库
- 性能敏感场景建议使用原生组件而非CSS动画
- 动态修改进度时可能需要添加过渡效果提升用户体验
