progress-bar 相关问题

进度条是图形用户界面中的组件，用于传达任务的进度，例如下载或文件传输。

带有样式组件的进度条样式 - React/TypeScript

我有这段代码，不知何故，唯一有效的样式只是外观：无；我正在关注本教程：https://blog.campvanilla.com/building-a-progress-bar-component-using-reactjs-styled-

reactjs typescript progress-bar styled-components

回答 1 投票 0

alive_progress 栏在 PyCharm 上不起作用

我正在尝试在 PyCharm 上使用 alive_progress alive_bar，但它仅在整个过程完成后才出现在控制台中。相反，我希望它随着 for 循环的运行而显示并进展......

python pycharm console progress-bar

回答 2 投票 0

尝试在进度条动画完成后触发事件后S...</desc> <question vote="0"> <p>我成功使用下面的 HTML 代码在我们的 LMS 中触发完成事件。</p> <pre><code> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Post-Survey: Workplace</title> <script> window.addEventListener('message', e => window.evolve = e.ports[0]); </script> </head> <body class="htmlNoPages"> <center><iframe src="https://docs.google.com/forms/..." onLoad="evolve?.postMessage('completed')" style="border:none;" height="1000" width="800"/></center> </body> </html> </code></pre> <p>我们正在尝试使用在页面加载时启动的进度条创建相同的触发器，并找到下面的代码示例来帮助入门，但我不知道如何让进度条的末尾同样触发。有人可以帮忙吗？</p> <pre><code><!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green" style="height:24px;width:0%"> </div> </div> <p id="myP">Added <span id="demo">0</span> of 10 photos</p> <body onload="move()"> </div> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 50); function frame() { if (width >= 100) { clearInterval(id); document.getElementById("myP").className = "w3-text-green w3-animate-opacity"; document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!"; window.addEventListener('message', e => window.evolve = e.ports[0]); document.addEventListener("load", "evolve?.postMessage('completed')") } } } </script> </body> </html> </code></pre> <p>我尝试了几次组合这些代码的迭代，但没有成功。</p> <p>理想情况下，删除任何有关上传照片的文本，我们只会有一个进度条，该进度条在页面加载时开始，并在完成加载时执行与 iframe 代码相同的结果。</p> </question> <answer tick="false" vote="0"> <p>由于文档已加载，因此您无法调用 <pre><code>evolve?.postMessage('completed')</code></pre> 作为 <pre><code>load</code></pre> 事件的处理程序。相反，直接运行它。（无论它做什么）</p> <p><pre><code>window.evolve.postMessage('complete')</code></pre></p> </answer> </body></html>

我成功使用下面的 HTML 代码在我们的 LMS 中触发完成事件。后S...</desc> <question vote="0"> <p>我成功使用下面的 HTML 代码在我们的 LMS 中触发完成事件。</p> <pre><code> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Post-Survey: Workplace</title> <script> window.addEventListener('message', e => window.evolve = e.ports[0]); </script> </head> <body class="htmlNoPages"> <center><iframe src="https://docs.google.com/forms/..." onLoad="evolve?.postMessage('completed')" style="border:none;" height="1000" width="800"/></center> </body> </html> </code></pre> <p>我们正在尝试使用在页面加载时启动的进度条创建相同的触发器，并找到下面的代码示例来帮助入门，但我不知道如何让进度条的末尾同样触发。有人可以帮忙吗？</p> <pre><code><!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <div class="w3-light-grey"> <div id="myBar" class="w3-container w3-green" style="height:24px;width:0%"> </div> </div> <p id="myP">Added <span id="demo">0</span> of 10 photos</p> <body onload="move()"> </div> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 50); function frame() { if (width >= 100) { clearInterval(id); document.getElementById("myP").className = "w3-text-green w3-animate-opacity"; document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!"; window.addEventListener('message', e => window.evolve = e.ports[0]); document.addEventListener("load", "evolve?.postMessage('completed')") } } } </script> </body> </html> </code></pre> <p>我尝试了几次组合这些代码的迭代，但没有成功。</p> <p>理想情况下，删除任何有关上传照片的文本，我们只会有一个进度条，该进度条在页面加载时开始，并在完成加载时执行与 iframe 代码相同的结果。</p> </question> <answer tick="false" vote="0"> <p>由于文档已加载，因此您无法调用 <pre><code>evolve?.postMessage('completed')</code></pre> 作为 <pre><code>load</code></pre> 事件的处理程序。相反，直接运行它。（无论它做什么）</p> <p><pre><code>window.evolve.postMessage('complete')</code></pre></p> </answer> </body></html>

javascript html progress-bar

回答 0 投票 0

使用 Microsoft.XMLHTTP 和 progres VBA 将文件上传到 Azure Blob 存储

我正在尝试使用 VBA for MS Access 中的 Microsoft.XMLHTTP 将文件上传到存储并进行进度跟踪。没有进度跟踪的上传工作正常，但我需要有进度跟踪，

vba azure xmlhttprequest azure-blob-storage progress-bar

回答 1 投票 0

在 Compose 中的新屏幕导航期间显示进度条

在 stackoverflow 中，我可以找到许多有关如何在屏幕中运行进程时在屏幕内显示进度条的示例，但我没有找到在屏幕之间显示进度条的示例。我有一些

android-jetpack-compose progress-bar

回答 1 投票 0

无法以编程方式将进度设置到进度栏

大家好我面临进度条进度的问题，我正在尝试更新进度条上的进度，但由于某种未知原因它始终显示 100% 或更高的值。下面是...

java android progress-bar android-progressbar

回答 1 投票 0

如何在进度条中部分使用边框半径和实际边框

我在进度栏中有多个部分，在本例中代表两种状态 - 已实现值和计划值。计划的部分应该有一个边框，并且接近进度条的末尾

html css progress-bar border-radius

回答 1 投票 0

带文件流的进度条C#

任何帮助将不胜感激。我对线程的东西不太了解。我试图在不使用 for 循环的情况下获得一个进度条来处理流。有什么想法吗？私有异步无效

c# progress-bar

回答 1 投票 0

如何顺利进步LinearProgressIndicator

所以我尝试在 Flutter 中创建一个线性进度指示器，在 5 秒内顺利填充指示器。目前我的方法如下：导入'dart：异步'；导入'包：fl...

android flutter animation progress-bar

回答 1 投票 0

Android studio jetpack 组成圆形进度条跟踪器，带有星巴克忠诚度计划等积分

我坚持使用喷气背包制作像星巴克这样的忠诚度计划功能，您可以根据您向咖啡店提供的可回收材料赚取积分，例如：1 杯值得

kotlin android-jetpack-compose progress-bar point reward-system

回答 1 投票 0

加载文件附件时的进度条

我在附加文件时加载进度条时遇到问题。我希望进度条一直工作，直到完成扫描附件文件。问题是当我附加文件并开始扫描时，

vb.net excel progress-bar

回答 2 投票 0

Python - 复制和移动文件的进度条

我创建了一个程序，将文件复制并移动到不同的方向。我想在整个过程中添加一个进度条会很有趣。我应该如何处理它？我的脚本做...

python python-2.7 progress-bar

回答 2 投票 0

如何用图标制作垂直进度条？

我想在图标中制作垂直进度条，类似于手机游戏《Reigns》或《Lapse》中的进度条，但我无法得到好的结果。您对如何制作它们有什么想法吗？我尝试使用两个

react-native progress-bar react-native-reanimated react-native-svg

回答 1 投票 0

Tkinter 进度条适用于 Linux，但不适用于 Windows

我编写了以下基本代码示例，用于创建带有按钮的主窗口。当按下按钮时，应该会出现带有进度条的第二个窗口，并保持打开状态，直到进度完成...

python linux windows tkinter progress-bar

回答 1 投票 0

android中两侧圆角的进度条

我正在尝试在android中创建一个自定义进度条。我使用了以下 xml 文件 (progress_bar_horizontal.xml)：我正在尝试在 android 中创建一个自定义进度条。我使用了以下 xml 文件（progress_bar_horizontal.xml）： <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="8dip" /> <stroke android:width="2dip" android:color="#FFFF"/> <solid android:color="#FFFF"/> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="8dip" /> <stroke android:width="2dip" android:color="#FFFF"/> <solid android:color="#FF00"/> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="8dip" /> <stroke android:width="2dip" android:color="#FFFF"/> <solid android:color="#FF00"/> </shape> </clip> </item> </layer-list> 除了我希望进度条中的进度两边都圆整之外，一切都运行良好。上述代码使进度条在左侧圆角化，并在右侧简单地剪切（不圆角化）。可能是因为 Clip 标签。你能帮我一下吗？我应该更改什么才能使进度条中的进度在两侧四舍五入？完整布局如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@drawable/gradient_progress" android:padding="10dip" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/progress_header" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FF000000" android:textAppearance="?android:attr/textAppearanceMedium" android:textStyle="bold" android:text="Uploading" /> <TextView android:id="@+id/progress_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FF000000" android:textAppearance="?android:attr/textAppearanceMedium" android:textStyle="bold" android:text="55%" android:paddingLeft="10dip" /> </LinearLayout> <ProgressBar android:id="@+id/progress_bar" style="?android:attr/progressBarStyleHorizontal" android:layout_gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:progressDrawable="@drawable/progress_bar_horizontal" android:maxHeight="12dip" android:minHeight="12dip" android:max="100" /> </LinearLayout> </LinearLayout> 这是我努力的结果：链接文本我希望红色条的右侧也有圆形边缘。非常感谢您的评论。这是时代的更新答案： Android源码使用Patch 9文件实现效果： http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizontal_holo_dark.xml/ 所以从布局 xml 开始： <ProgressBar android:id="@+id/custom_progress_bar" style="@android:style/Widget.ProgressBar.Horizontal" android:indeterminateOnly="false" android:progressDrawable="@drawable/custom_progress_bar_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="13" android:progress="33" android:secondaryProgress="66" /> 您可以将其中的大部分内容移至样式 xml，但这不是重点。我们真正关心的是 android:progressDrawable="@drawable/custom_progress_bar_horizontal" - 这将允许我们指定我们自己的自定义进度条： <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:drawable="@android:drawable/custom_progress_bg" /> <item android:id="@android:id/secondaryProgress"> <scale android:scaleWidth="100%" android:drawable="@android:drawable/custom_progress_secondary" /> </item> <item android:id="@android:id/progress"> <scale android:scaleWidth="100%" android:drawable="@android:drawable/custom_progress_primary" /> </item> </layer-list> 或者您不必使用 Patch 9 作为背景 - 例如，这是一个带有 1dp 边框的简单白色背景： <item android:id="@android:id/background"> <shape> <corners android:radius="6.5dp" /> <solid android:color="@android:color/white" /> <stroke android:width="1dp" android:color="@android:color/darker_gray" /> </shape> </item> Android Asset Studio 有一个很棒的工具可以帮助您生成 Patch 9 文件： http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html 工具前有填充的主要 xdpi png 示例：工具前有填充的辅助 xdpi png 示例：最终输出：只需将标签 <clip> 更改为 <scale>，如下所示： <scale android:scaleWidth="100%"> 您可以使用材质组件库提供的 LinearProgressIndicator 和 app:trackCornerRadius 属性。类似： <com.google.android.material.progressindicator.LinearProgressIndicator android:indeterminate="true" app:indicatorSize="xxdp" app:trackCornerRadius="xdp"/> 注意：至少需要版本1.3.0-alpha04。据我所知，这是不可能的。因为在内部 ClipDrawable（即剪辑标签）使用 canvas.clipRect() 剪切给定的形状/可绘制对象。顺便说一句，您可以从 here 复制 ClipDrawable 源，并根据进度级别剪辑特定路径。为了解决进度非常低时最终图形自身重叠的问题，我编写了 ProgressBar 类的扩展，它为进度条添加了固定的起始偏移量，而其他功能则正常。只需调用“setMaxWithPercentOffset()”或“setMaxWithOffset()”，而不是“setMax()”，传入要添加为进度条起始偏移量的值。如果有人在不需要开始偏移的情况下解决了这个问题，请告诉我！ /** * This progress bar can be used when the progress bar end graphics are styled in some way. * In this case, the progress bar must always have a small percentage of progress, otherwise * the styled ends of the progress overlap each other. * */ public class EndStyledProgressBar extends ProgressBar { private static final int DEFAULT_START_OFFSET_PERCENT = 5; private int mStartOffset; private int mRealMax; public EndStyledProgressBar(Context context) { super(context); commonConstructor(); } public EndStyledProgressBar(Context context, AttributeSet attrs) { super(context, attrs); commonConstructor(); } public EndStyledProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); commonConstructor(); } private void commonConstructor() { mRealMax = super.getMax(); mStartOffset = 0; setMaxWithPercentOffset(DEFAULT_START_OFFSET_PERCENT, mRealMax); super.setProgress(super.getProgress() + mStartOffset); super.setSecondaryProgress(super.getSecondaryProgress() + mStartOffset); } public void setProgress(int progress) { super.setProgress(progress + mStartOffset); } public void setSecondaryProgress(int secondaryProgress) { super.setSecondaryProgress(secondaryProgress + mStartOffset); } public int getProgress() { int realProgress = super.getProgress(); return isIndeterminate() ? 0 : (realProgress - mStartOffset); } public int getSecondaryProgress() { int realSecondaryProgress = super.getSecondaryProgress(); return isIndeterminate() ? 0 : (realSecondaryProgress - mStartOffset); } public int getMax() { return mRealMax; } /** * Don't call this, instead call setMaxWithPercentOffset() or setStartOffsetInPercent() * * @param max */ public void setMax(int max) { super.setMax(max); } /** * Sets a new max with a start offset (in percent) included. * * @param startOffsetInPercent start offset for the progress bar to avoid graphic errors. */ public void setMaxWithPercentOffset(int startOffsetInPercent, int max) { mRealMax = max; int startOffset = (mRealMax * startOffsetInPercent) / 100; setMaxWithOffset(startOffset, max); } /** * Sets a new max with a start offset included. * * @param startOffset start offset for the progress bar to avoid graphic errors. */ public void setMaxWithOffset(int startOffset, int max) { mRealMax = max; super.setMax(startOffset + max); setStartOffset(startOffset); super.setMax(startOffset + max); } /** * Sets a new start offset different from the default of 5% * * @param startOffset start offset for the progress bar to avoid graphic errors. */ private void setStartOffset(int startOffset) { int newStartOffset = startOffset; // Ensure the start offset is not outside the range of the progress bar if (newStartOffset < 0) newStartOffset = 0; if (newStartOffset >= super.getMax()) newStartOffset = super.getMax(); // Apply the start offset difference if (mStartOffset != newStartOffset) { int diff = newStartOffset - mStartOffset; super.setMax(super.getMax() + diff); super.setProgress(super.getProgress() + diff); super.setSecondaryProgress(super.getSecondaryProgress() + diff); mStartOffset = newStartOffset; } } } 最终没有9补丁的圆形两侧进度条是： android:progressDrawable="@drawable/progress_horizontal_green" <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/progress"> <scale android:scaleWidth="100%"> <shape> <corners android:radius="5dip"/> <solid android:color="#33FF33"/> </shape> </scale> </item> 在drawable文件夹中创建progress_bg.xml文件 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <solid android:color="@color/grey" /> <corners android:radius="10dp" /> </shape> </item> <item android:id="@android:id/progress"> <scale android:scaleWidth="100%"> <shape> <gradient android:angle="270" android:endColor="#048B7B" android:startColor="#00BBA5" /> <corners android:radius="10dp" /> </shape> </scale> </item> </layer-list> 在ProgressBar中使用上面的progress_bg.xml作为progressDrawable属性（例如android:progressDrawable="@drawable/progress_bg"）。

android user-interface progress-bar android-progressbar material-components-android

回答 7 投票 0

Twitter Bootstrap：进度条上的居中文本

我一直在使用 Twitter 的 bootstrap，我希望进度条上的文本能够在 on bar 上居中，无论其值如何。下面的链接是我现在拥有的。我希望所有文字都是

css twitter-bootstrap progress-bar centering

回答 3 投票 0

使用langchain创建矢量存储时如何添加进度条/状态？

使用 Python 库 langchain 创建矢量存储可能需要一段时间。如何添加进度条？使用 langchain 创建向量存储的代码示例：导入打印件来自

python progress-bar langchain faiss

回答 2 投票 0

如何创建固定渐变的渐变进度条

我对 HTML 和 CSS 相当陌生。我想创建一个具有渐变背景的进度条，它掩盖了整个元素，但仅在进度条本身上可见。到目前为止我只做到了...