ak-progress 进度与仪表

用于生命值、技力、理智、部署费用和行动进度。水平进度条适合连续数据，八边形仪表适合突出单个关键数值。

Deploy 68 percent

SOURCE / HTML

html

<div class="ak-progress-stack">
  <div class="ak-progress" role="progressbar" aria-label="生命值" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--ak-progress-value: 78%">
    <div class="ak-progress__header"><span>Operator HP</span><span class="ak-progress__value">78%</span></div>
    <div class="ak-progress__track"><span class="ak-progress__fill"></span></div>
  </div>
  <div class="ak-progress ak-progress--warning" role="progressbar" aria-label="技力" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" style="--ak-progress-value: 42%">
    <div class="ak-progress__header"><span>Skill Point</span><span class="ak-progress__value">42 / 100</span></div>
    <div class="ak-progress__track"><span class="ak-progress__fill"></span></div>
  </div>
</div>

<div class="ak-gauge ak-gauge--warning" role="progressbar" aria-label="部署进度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="68" style="--ak-gauge-value: 68%">
  <div class="ak-gauge__content">
    <span class="ak-gauge__label">Deploy</span>
    <strong class="ak-gauge__value">68</strong>
    <span class="ak-gauge__unit">percent</span>
  </div>
</div>

Progress

通过 --ak-progress-value 设置填充比例，通过 --ak-progress-signal 设置状态色。请同时维护 aria-valuenow，确保视觉值与无障碍信息一致。

html

<div class="ak-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--ak-progress-value: 78%">
  <!-- header and track -->
</div>

Gauge

ak-gauge 使用 --ak-gauge-value 与 --ak-gauge-signal。默认仪表保持终端深色内核，适合部署、充能和资源百分比。

ak-progress 进度与仪表 ​

Progress ​

Gauge ​

ak-progress 进度与仪表

Progress

Gauge