可用 HTML 语法，在 Obsidian 中生成进度条。（也可用于其他支持 HTML 的软件中）

非常简单，傻瓜式操作，无脑点击运行即可。

个人建议：搭配快捷键或文本指令会更快乐呦~

CSS 美化

/* 進度條顏色依value變化 */
progress[value^="1"]::-webkit-progress-value, 
progress[value^="2"]::-webkit-progress-value,
progress[value^="3"]::-webkit-progress-value {
  background: var(--color-red) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

progress[value^="4"]::-webkit-progress-value,
progress[value^="5"]::-webkit-progress-value {
  background: var(--color-orange) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

progress[value^="6"]::-webkit-progress-value,
progress[value^="7"]::-webkit-progress-value {
  background: var(--color-yellow) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

progress[value^="8"]::-webkit-progress-value,
progress[value^="9"]::-webkit-progress-value {
  background: var(--color-green) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

progress[value="1"]::-webkit-progress-value, 
progress[value="2"]::-webkit-progress-value,
progress[value="3"]::-webkit-progress-value,
progress[value="4"]::-webkit-progress-value,
progress[value="5"]::-webkit-progress-value,
progress[value="6"]::-webkit-progress-value,
progress[value="7"]::-webkit-progress-value,
progress[value="8"]::-webkit-progress-value,
progress[value="9"]::-webkit-progress-value
{
  background: var(--color-red) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

progress[value="100"]::-webkit-progress-value {
  background: var(--color-blue) !important;
  box-shadow: none;
  border-color: transparent;
  border-radius: 2px;
}

.markdown-preview-view progress, .markdown-rendered progress, .markdown-source-view.is-live-preview progress {
  height: 15px;
}

上述代码的代用方式很简单：

1. 新建一个文件文档；
2. 把 .txt 的后缀改为 .css（发现没有后缀的，可在网上搜一下怎么显示隐藏的文件后缀）；
3. 将上述代码复制粘贴到该文件中；
4. 再把该文件放入 Obsidian 库器的 .obsidian/snippets 中（没有文件夹就新建一个）；
5. 打开 Obsidian 的设置，在外观中翻到 CSS 片段，并开启。

该代码的功能是：让进度条随着完成度改变颜色，以及加粗进度条。

来源

这个动作是我根据一个 B 站 up 主的视频写的，上面的 CSS 片段也是这个 up 主写的，下面是这个 up 主发的对应视频及链接：

up 主简睿学堂的视频【Obs128｜Obsidian DataView进度条与YAML栏位快速输入的方法(Templater Script)】 。

更新符号解释

• [+]：新增功能；
  
• [-]：删除功能；
• [=]：修改功能；
• [~]：修复 Bug。

外话

以上。

如果对该动作有其它需求，或发现某些 Bug，欢迎在评论区反馈。

谢谢支持！