答案：使用Semantic UI的progress类结合HTML、CSS和JavaScript可创建并动态更新带百分比的进度条。1. 引入Semantic UI的CSS文件；2. 创建包含ui progress类的基础结构，内含bar和progress元素；3. 通过style设置width或用JavaScript修改宽度与文本内容实现百分比显示；4. 可添加success、warning、error等状态类增强视觉反馈。动态更新时，通过JS改变宽度和内部文本即可实时反映进度变化。
Semantic UI 提供了简洁的进度条组件，可以通过 HTML 和 CSS 快速实现带百分比显示的进度条。虽然 Semantic UI 本身不依赖 JavaScript 插件来渲染基础样式，但要动态设置百分比，通常需要结合少量 JavaScript 来更新状态。下面介绍如何使用 Semantic UI 的 progress 类创建并设置带有百分比的进度条。
1. 引入 Semantic UI 样式文件
在使用前，确保页面已引入 Semantic UI 的 CSS 文件。可以通过 CDN 引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css">2. 创建基础进度条结构
Semantic UI 使用 ui progress 类来定义进度条。基本结构如下：
<div class="bar">
<div class="progress"></div>
</div>
</div>
其中：
立即学习“前端免费学习笔记（深入）”；
-
progress容器：最外层容器 -
bar：表示进度条本体 -
progress（内层）：显示当前完成百分比的文字
3. 设置固定百分比
你可以通过内联样式或 JavaScript 动态设置 bar 的宽度来展示百分比：
<div class="bar" style="width: 60%;">
<div class="progress">60%</div>
</div>
<div class="label">上传进度</div>
</div>
此时进度条显示为 60%，并附带文字标签。
4. 使用 JavaScript 动态更新百分比
如果需要动态控制，例如从 0% 到 100%，可用 JavaScript 更新宽度和文本：
<div class="ui progress" id="myProgress"><div class="bar">
<div class="progress"></div>
</div>
<div class="label">加载中...</div>
</div>
JavaScript 示例：
<script>function setProgress(percent) {
const bar = document.querySelector('#myProgress .bar');
const text = document.querySelector('#myProgress .progress');
bar.style.width = percent + '%';
text.textContent = percent + '%';
}
// 调用示例
setProgress(75); // 设置为 75%
</script>
5. 添加状态样式（可选）
Semantic UI 支持为进度条添加状态类，增强视觉效果：
-
success：成功完成 —
class="ui success progress" -
warning：警告状态 —
class="ui warning progress" -
error：错误状态 —
class="ui error progress"
例如：
<div class="ui success progress"><div class="bar" style="width: 100%;">
<div class="progress">完成！</div>
</div>
</div>
基本上就这些。Semantic UI 的进度条轻量易用，配合简单的 DOM 操作就能实现动态百分比展示。关键是控制 bar 的宽度和内部文本内容，即可准确反映进度状态。
