在思源笔记中使用进度条

效果

image.png

使用

这里提一下:使用的主题是: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 类中的 heightline-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>
  • VSCE主题

    思源笔记的 VSCode Lite Edit 主题,仓库地址为:GitHub。可在集市中搜索下载。

    10 引用 • 45 回帖 • 1 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26029 引用 • 108013 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...