HTML 进度条

HTML 进度条 公开

ImmortalSty 分享于 2023-05-21 00:14 | 1 | 24
如何安装动作?
复制Ta的推荐码
不知道写啥,但想写点啥……

适用于
分类
其他 组合操作 功能增强

1 个动作单 收藏了此动作。

更多信息
分享时间 2023-05-21 00:14
最后更新 2023-05-21 00:14
修订版本 0
用户许可 -未设置-
Quicker版本 1.38.3
动作大小 2.7 KB

分享到

「利用 HTML 语法,在 Obsidian 中实现进度条。」

简介

可用 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,欢迎在评论区反馈。

谢谢支持!

最近更新

修订版本 更新时间 更新说明
0 2023-05-21 00:14

最近讨论

随便聊聊 · 1 · 104
explorer.exe 2023-06-01 15:34