当前位置：首页 > uni-app

uniapp圆形加载

2026-02-06 00:16:31uni-app

uniapp 圆形加载实现方法

使用内置组件实现

uniapp提供了progress组件，可以通过设置stroke-width和color属性实现圆形加载效果。

uniapp圆形加载

<progress 
  percent="50" 
  stroke-width="10" 
  activeColor="#4cd964" 
  backgroundColor="#e5e5e5" 
  active
></progress>

使用CSS自定义样式

通过CSS可以实现更灵活的圆形加载动画效果。

uniapp圆形加载

<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>