在思源笔记中使用进度条

效果

使用

这里提一下：使用的主题是：VSCode Lite Edit

使用方法：在思源笔记里面嵌入 HTML 代码块就可以了

目前支持以下六种颜色样式类（添加在 .progress-bar 上）：

类名	颜色	示例
`red-progress`	🔴 红色	`<div class="progress-bar red-progress">`
`yellow-progress`	🟡 黄色	`<div class="progress-bar yellow-progress">`
`green-progress`	🟢 绿色	`<div class="progress-bar green-progress">`
`cyan-progress`	🟦 蓝绿	`<div class="progress-bar cyan-progress">`
`blue-progress`	🔵 蓝色	`<div class="progress-bar blue-progress">`
`gray-progress`	⚪ 灰色	`<div class="progress-bar gray-progress">`

animation: loadingAnimation 10s infinite linear; 这个是用来调节动画控制的

.progress-bar 类中的 height 和 line-height 属性是用来调节高度的

基本就这些

代码展示


html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>多样式动态进度条示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
    }
    .progress-container {
      width: 100%;
      max-width: 100%;
      margin: 10px auto;
      /* 调整后的高度和行高 */
      height: 25px;
      line-height: 25px;
      text-align: center;
      color: white;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: relative;
    }
    .progress-bar {
      height: 100%;
      transition: width 0.3s ease-in-out;
      animation: loadingAnimation 20s infinite linear;
    }
    @keyframes loadingAnimation {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    .red-progress {
      background: repeating-linear-gradient(-45deg, #ff0000, #ff0000 10px, #ff4d4d 10px, #ff4d4d 20px);
      background-size: 200% 100%;
    }
    .yellow-progress {
      background: repeating-linear-gradient(-45deg, #ffff00, #ffff00 10px, #ffcc00 10px, #ffcc00 20px);
      background-size: 200% 100%;
    }
    .green-progress {
      background: repeating-linear-gradient(-45deg, #00ff00, #00ff00 10px, #00cc00 10px, #00cc00 20px);
      background-size: 200% 100%;
    }
    .cyan-progress {
      background: repeating-linear-gradient(-45deg, #00ffff, #00ffff 10px, #00cccc 10px, #00cccc 20px);
      background-size: 200% 100%;
    }
    .blue-progress {
      background: repeating-linear-gradient(-45deg, #0000ff, #0000ff 10px, #3333ff 10px, #3333ff 20px);
      background-size: 200% 100%;
    }
    .gray-progress {
      background: repeating-linear-gradient(-45deg, #cccccc, #cccccc 10px, #aaaaaa 10px, #aaaaaa 20px);
      background-size: 200% 100%;
    }
  </style>
</head>
<body>
  <!-- 进度条实例 -->
  <div class="progress-container">
    <div class="progress-bar red-progress" style="width: 80%;">加载中...</div>
  </div>
  <div class="progress-container">
    <div class="progress-bar yellow-progress" style="width: 40%;">加载中...</div>
  </div>
  <div class="progress-container">
    <div class="progress-bar green-progress" style="width: 60%;">加载中...</div>
  </div>
  <div class="progress-container">
    <div class="progress-bar cyan-progress" style="width: 80%;">加载中...</div>
  </div>
  <div class="progress-container">
    <div class="progress-bar blue-progress" style="width: 90%;">加载中...</div>
  </div>
  <div class="progress-container">
    <div class="progress-bar gray-progress" style="width: 100%;">完成</div>
  </div>
</body>
</html>

自动旋转头像

效果图这里面的图片是可以自动旋转的 [图片] 使用主题这里我使用的是 [链接] 主题的暗黑模式使用方法使用方法：在思源笔记里面嵌入 HTML 代码块就可以了代码展示剩余的就需要你自己来进行排版了头像

分享下几个 Callout 样式

样式如图 [图片] 使用主题这里我使用的是 VSCode Lite Edit 主题的暗黑模式使用方法使用方法：在思源笔记里面嵌入 HTML 代码块就可以了代码展示： Dark Mode Callout Supported types Following is a list of type qualifiers ..

VSCode Lite Edit 主题 2.3.0 版本更新说明

大家好久不见。时隔半月余，VSCode Lite Edit 主题终于发布了新的版本。本次版本发布修改内容过多，可能存在部分未被测试发现的问题，各位在发现问题之后可以直接在此帖下回帖反馈。本次更新内容为：新增自定义属性(beta 测) 设置面板中未设置的选项使用默认值修改双标签栏的显示效果修复思源版本 3.1.3 ..

VSCode Lite Edit 主题的一次探索

目前 VSCE 主题正在探索一种比起主题设置更细致的控制方式：自定义属性。通过自定义属性，预定义一些有趣的样式，并由用户自行启用或取消。相关的配置项看这里。由于这个功能实现起来好像没有多简单，我大概短期内不会添加什么复杂的样式，目前想要征求各位 VSCE 主题用户的意见，需要在自定义样式中实现什么方面的样式内容？目前 ..

VSCode Lite Edit 主题在思源笔记 3.1.28 版本下出现请求 401 问题

VSCode Lite Edit 主题在思源笔记更新到 3.1.28 版本后出现请求返回 401 Unauthorized 问题，直到主题的 2.2.8 版本仍能复现。本次受影响范围含：主题设置读写等。（应该是 3.1.28 版本开始出现的）在无法获取用户的设置文件情况下，主题会按照默认配置加载样式文件，可能导致界面 ..

VSCE 主题刚折腾了个双标签栏

VSCode Lite Edit 主题刚刚发版，折腾了个半成品的双标签栏，可以将钉住的标签移动到上一行，没有钉住的标签在下一行。目前这个功能属于测试中，只保证了基础功能可用，其他方面没有很好的适配，比如背景色、标签栏右侧操作按钮等都有点问题。在设置中启用之后需要刷新页面一次或多次，如果在思源启动之后没有钉住的标签页 ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于