进度

进度条表示有明确起点与终点的任务完成程度，并在可能时提供可读的当前值。

已完成 66%

安装Terminal

npm install @a3s-lab/ui

<div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 66%"></span>
</div>

import "@a3s-lab/ui/a3s.css";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、细节组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/progress.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

添加进度条 HTML

Add class="progress" and role="progressbar" to the root. Use one child <span> as the visual indicator.

<div class="progress" role="progressbar" aria-label="Loading" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
  <span style="width: 66%"></span>
</div>

HTML 结构

<div class="progress" role="progressbar">: Progress root. Set aria-label or aria-labelledby, plus aria-valuenow, aria-valuemin, and aria-valuemax.
<span style="width: ...">: Visual indicator. Its width should match the current value.

示例

<div class="field">
  <div class="flex items-center gap-3 text-sm">
    <label id="progress-label">Upload progress</label>
    <output class="ms-auto tabular-nums">66%</output>
  </div>
  <div class="progress" role="progressbar" aria-labelledby="progress-label" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
    <span style="width: 66%"></span>
  </div>
</div>

RTL

进展在根或父级上支持dir="rtl"。

تقدم الرفع ٦٦%

<div class="field w-full" dir="rtl">
  <label id="progress-upload-rtl" for="progress-upload">تقدم الرفع <span class="ms-auto">٦٦%</span></label>
  <div id="progress-upload" class="progress" role="progressbar" aria-labelledby="progress-upload-rtl" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100">
    <span style="width: 66%"></span>
  </div>
</div>

#进度

#用法

引入 CSS

添加进度条 HTML

#HTML 结构

#示例

#标签

#RTL

进度

用法

HTML 结构

示例

标签

RTL