HudProgress 进度

线性或环形进度，让过程清晰可见。

基础用法

72%同步完成

数据同步72%

调整示例进度

72

正在连接进行中

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmHudProgress, AgmSlider } from 'augma'
import { shallowRef } from 'vue'

const value = shallowRef(72)
</script>

<template>
  <div class="example-stack">
    <AgmHudProgress label="同步完成" :value="value" variant="ring" />
    <AgmHudProgress label="数据同步" :value="value" />
    <AgmSlider v-model="value" label="调整示例进度" />
    <AgmHudProgress label="正在连接" />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
label	string	必填	进度名称
value	number	undefined	未提供或非有限数值表示不确定进度
max	number	100	有效上界，非法值回退到 100
variant	'bar' | 'ring'	'bar'	显示形式

键盘操作与使用边界

只读进度使用 progressbar 语义；数值被约束到 0 到 max，不确定进度不设置 aria-valuenow。

安装

import { AgmHudProgress } from 'augma'
import 'augma/style.css'

复制可编辑源码：

pnpm dlx [email protected] add https://augma.yunyoujun.cn/r/hud-progress.json