HudProgress

Linear or ring progress that keeps a process visible.

Basic usage

Live preview

72%Synced

…Scanning

Data sync72%

Adjust sample progress

72

ConnectingIn progress

View Vue source

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">
    <div class="example-row">
      <AgmHudProgress label="Synced" :value="value" variant="ring" />
      <AgmHudProgress label="Scanning" variant="ring" />
    </div>
    <AgmHudProgress label="Data sync" :value="value" />
    <AgmSlider v-model="value" label="Adjust sample progress" />
    <AgmHudProgress label="Connecting" indeterminate-text="In progress" />
  </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

Prop	Type	Default	Description
label	string	Required	Progress name
value	number	undefined	Leave it out, or pass a non-finite number, for indeterminate progress
max	number	100	Upper bound; invalid values fall back to 100
variant	'bar' | 'ring'	'bar'	Display style
indeterminateText	string	'进行中'	Text a bar shows while progress is indeterminate

Keyboard and usage notes

Read-only progress uses progressbar semantics; the value is clamped to 0–max, and indeterminate progress leaves out aria-valuenow.

Installation

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

Copy the editable source:

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