progress-bar 相关问题

如何使进度条线与检查点分开？

我正在尝试制作进度条，但我发现将线与检查点分开有些困难， 这是我尝试过的： /* 麦粒肿...</desc> <question vote="0"> <p><a href="https://i.stack.imgur.com/FxCzs.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0Z4Q3pzLnBuZw==" alt=""/></a></p> <p>我正在尝试制作进度条，但我发现将线与检查点分开有些困难， 这是我尝试过的：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; /* Style for the outer container */ .outer-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 100% viewport height */ } /* Style for the progress container */ .progress-container { width: 80%; height: 5px; background-color: green; position: relative; } /* Style for the car icon */ .car { width: 20px; height: 20px; background-color: red; border-radius: 50%; position: absolute; top: -10px; left: 0; transition: left 1s linear; } /* Style for the checkpoints */ .checkpoint { width: 10px; height: 10px; background-color: #88CCDF; /* Specify the color for the checkpoints */ border-radius: 50%; position: absolute; top: -5px; margin-left: -5px; /* Adjusted to add space on both sides */ } /* Style for the checkpoints in different states */ .before-reached { background-color: #88CCDF; /* Default color for checkpoints before reaching */ } .reached { background-color: yellow; /* Color for checkpoints when reached */ } .passed { background-color: green; /* Color for checkpoints when passed */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;outer-container&#34;&gt; &lt;div class=&#34;progress-container&#34;&gt; &lt;!-- Checkpoints --&gt; &lt;div class=&#34;checkpoint before-reached&#34; style=&#34;left: 5%;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;checkpoint before-reached&#34; style=&#34;left: 25%;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;checkpoint before-reached&#34; style=&#34;left: 45%;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;checkpoint before-reached&#34; style=&#34;left: 65%;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;checkpoint before-reached&#34; style=&#34;left: 85%;&#34;&gt;&lt;/div&gt; &lt;!-- Car icon --&gt; &lt;div class=&#34;car&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; // JavaScript to move the car along the progress line const car = document.querySelector(&#39;.car&#39;); const checkpoints = document.querySelectorAll(&#39;.checkpoint&#39;); let currentCheckpointIndex = 0; function moveCarToNextCheckpoint() { if (currentCheckpointIndex &lt; checkpoints.length - 1) { // Before reaching the next checkpoint, change the checkpoint color to yellow checkpoints[currentCheckpointIndex].classList.remove(&#39;before-reached&#39;); checkpoints[currentCheckpointIndex].classList.add(&#39;reached&#39;); currentCheckpointIndex++; const nextCheckpoint = checkpoints[currentCheckpointIndex]; car.style.left = nextCheckpoint.style.left; } else { // When the car passes all checkpoints, change the checkpoint color to green checkpoints[currentCheckpointIndex].classList.remove(&#39;before-reached&#39;); checkpoints[currentCheckpointIndex].classList.add(&#39;passed&#39;); } } // Initially, set the color of the first checkpoint to yellow (before reaching) checkpoints[currentCheckpointIndex].classList.add(&#39;before-reached&#39;); // Simulate progress by moving the car every 2 seconds setInterval(moveCarToNextCheckpoint, 2000); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>不幸的是，结果与设计相差甚远： <a href="https://i.stack.imgur.com/cTZnz.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2NUWm56LnBuZw==" alt=""/></a></p> <p>我尝试在每个点之后放置线条 div 不起作用，我尝试为点添加边距，但线条也不起作用。 注：让红点移动的js，它就像一个“送货跟踪系统”。</p> </question> <answer tick="false" vote="0"> <p>我的解决方案包括向列表中添加额外的元素。</p> <p>我们基本上想要的是与您拥有的相同的圆圈，但我们希望它是白色（或任何背景颜色）并且比检查点稍大。</p> <p>为此，我做了以下工作</p> <pre><code> .checkpoint { width: 10px; height: 10px; background-color: #88CCDF; /* Specify the color for the checkpoints */ border-radius: 50%; position: absolute; left: 50%; top: 25%; margin-left: -5px; /* Adjusted to add space on both sides */ } .checkpoint-container{ background-color: rgb(255, 255, 255); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: -5px; } &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 5%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>这应该创建一个包含检查点（黄点）的 div。我们可以让这个Div比黄点稍大一些，并将其背景设置为白色。然后当它显示时，它会提供一个间隙</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> /* Style for the outer container */ .outer-container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 100% viewport height */ } /* Style for the progress container */ .progress-container { width: 80%; height: 5px; background-color: green; position: relative; } /* Style for the checkpoints */ .checkpoint { width: 10px; height: 10px; background-color: #88CCDF; /* Specify the color for the checkpoints */ border-radius: 50%; position: absolute; left: 50%; top: 25%; margin-left: -5px; /* Adjusted to add space on both sides */ } .checkpoint-container{ background-color: rgb(255, 255, 255); width: 20px; height: 20px; border-radius: 50%; position: absolute; top: -150%; } .reached { background-color: yellow; /* Color for checkpoints when reached */ }</code></pre> <pre><code>&lt;div class=&#34;outer-container&#34;&gt; &lt;div class=&#34;progress-container&#34;&gt; &lt;!-- Checkpoints --&gt; &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 5%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 25%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 45%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 65%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;checkpoint-container&#34; style=&#34;left: 85%;&#34;&gt; &lt;div class=&#34;checkpoint before-reached&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>我从上面的代码片段中删除了 JS 和 Car，但展示了容器如何工作来创建空间</p> <p>希望有帮助！</p> </answer> </body></html>

Kivy进度条改变颜色，无需kv

嗨，我想在没有 kv 文件的情况下更改 kivy 进度条的颜色，我该怎么做？

有没有办法在寻找时改变flutter audio_video_progress_bar进度时间？

我目前正在使用 just_audio 包构建音乐播放器应用程序，该包利用了 audio_video_progress_bar。我主要是根据文档实现的。

如何通过curselection()将进度条绑定到列表框

请看下面的代码： 从 tkinter 导入 * # 创建列表框 列表=列表框（窗口，selectmode =“多个”，字体=（“Consolas”，21），宽度= 100，光标='点'） # 插入...

在 Python 的 tqdm 模块中格式化大量输出以提高可读性

有什么方法可以在 tqdm 的进度条中格式化大数字以提高可读性吗？例如， 1000000row/s 必须为 1,000,000rows/s 。 我了解单位比例，但它的数字格式如下...

带有渐变swift的半圆形进度条

我想在iOS中使用swift创建一个带有渐变颜色的半圆形进度条。进度条最小值为 300，进度条最大值为 900。 进度条当前值...

如何在 Django 中上传文件并显示进度条？

我编写了在 Django 中上传文件的代码，如下所示： def上传（请求）： 如果 request.method == 'POST': 表单 = UploadFileForm(请求.POST, 请求.FILES) 如果 form.is_valid():

如何在jetpack compose中暂停进度动画

大家好，我面临着这个问题，我需要一些许可， 我正在尝试实现与 Instagram 故事中基本相同的水平进度 事情是当用户开始滚动到

如何使用 CSS 制作 HTML5 进度条动画？

当我们单击以下 HTML 元素时，其值更改为 200。 但没有动画效果： 进步 { 过渡：全 1 秒轻松； -webkit-transition：全部 1 秒轻松；

有没有办法制作像ionic 3中图像中那样的圆形进度条？

我正在尝试制作一个圆形进度条，如所附图像中的进度条。 我看过以下内容： https://bootsoon.github.io/ng-circle-progress/ https://ampersandacademy.com/

Netmiko 的 send_config_set() 中的进度条

我想在我的Python脚本中的send_config_set(rendered_template,cmd_verify=False)上添加一个进度条。 该 render_template 是动态生成的，因此它的大小和数量可能会有所不同。共同...

防止自定义进度条闪烁

对于我正在制作的应用程序，我根据 William Daniel 制作的进度条制作了一个自定义进度条：How to Change the color of Progressbar in C# .NET 3.5? 在以较低百分比 va 进行一些测试后...

使用 tqdm 和多进程，进度条会使代码速度减慢 5 倍

我使用 tqdm 在 2.7 python 代码中添加了一个进度条，但它显着减慢了我的代码速度。例如，如果没有进度条，则需要 12 秒，而如果有进度条，则需要...

Material Ui AppBar 与 Nprogress

代码： 我正在使用 Material-ui，当我在 Nextjs 应用程序中使用 nprogress 和 Material ui 时，它不会显示在顶部。但是当 AppBar 颜色为

从 bash 定向时，R 进度条未捕获在日志文件中

在Linux中，当我重新路由包含进度条（来自progressr包）的R代码的输出时，进度条不会在日志文件中捕获（我正在使用ta..监控日志文件） .

如何设置进度元素的颜色？

是否可以在 HTML 中为 元素设置“条”的颜色（当您指定一个值时，条会填充到该值的位置）？如果是这样，怎么办？背景-co...

VB.NET 中的气质进度条

如果有人有任何其他解决方案来实现这一目标，我将非常有兴趣听到他们的声音。 我正在尝试为学校项目创建一个密码检查程序，但我的

如何检索 .exe 文件的代码并查看它是如何构建和工作的？

问题是有3dsmaxcmd.exe用于渲染，它能够显示完成需要多长时间和预计时间。 我的目标是提取两个时间日期，...

使用 Java SSH 连接监控服务器上的文件下载进度

我使用 ssh conn 从服务器下载文件 SshClient 客户端 = new SshClient(); client.init(vmIP,sshUser,sshPassword); 长startTime = Instant.now().getEpochSecond(); 字符串响应 = 客户端....

Angular 进度条之间的差异

我需要帮助为我的角度应用程序选择进度条，现在我有 2 个选项，我想知道其中一个相对于另一个的优势。 1.ngx-loading-bar/核心 2.ngx-进度条/...