进度条是图形用户界面中的组件，用于传达任务的进度，例如下载或文件传输。
我正在编写一个 R 闪亮的 Web 应用程序。我正在寻找一种方法将进度条放在网页的中心并调整进度条的大小。我使用的函数是“withProgress”...
我想设置progressDialog的主题。为了创建它，我使用以下代码： ProgressDialog = ProgressDialog.show(this, "请稍候", "正在加载字典文件...", true, false); 我不能只写...
许多程序通过打印到标准输出然后返回到行首并再次打印来显示进度条。这样他们就可以实现实时进度条的出现。 不幸的是，在我...
我正在尝试更改 swipeRefresh 进度的位置并使其位于移动屏幕的中心，但它始终出现在顶部， 我尝试使用此代码将 swipeRefresh 放在中心但是...
使用 Numba 和 Cuda 在 python 中创建进度条
我正在使用 numba 和 CUDA（在 Windows 上）运行一个并行进程，这将需要相当长的时间。最好在控制台中打印一个更新进度条，这样我就可以看到进度了......
我正在尝试向我的代码添加一个丰富的进度条。但是，当代码运行时，该栏仅在完成后更新为 100%。我可以帮忙吗？我的代码： 主题 = 主题({'成功': ...
进度{ 边框：无； 宽度：400px； 高度：60 像素； 背景：深红色； } 进步 { 颜色：浅蓝色； } 进度::-webkit-进度-值 { 背景：浅蓝色； }
当我尝试更改进度条颜色时，当进度条处于循环模式时，它现在显示背景颜色 应用风格的图像将比任何解释更好 当我应用这个时
Bootstrap 进度条在 UpdatePanel 中不起作用 - ASP.NET
我正在尝试使用UpdatePanel（Ajaxtoolkit）中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 我正在尝试使用UpdatePanel（Ajaxtoolkit）中的引导进度条。我想通过 for 循环显示进度条的进度。以下是 ASP.NET 代码 <div class="progress" style="width:80%;margin:auto;"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" aria- valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> 以下是C#的代码 intProgressBarCurrentPercentage += intProgressBarPercentageIncrement; divProgressBar.Style.Add("width", intProgressBarCurrentPercentage.ToString("F1") + "%"); divProgressBar.Attributes.Add("aria-valuenow", intProgressBarCurrentPercentage.ToString("F1")); divProgressBar.InnerText = intProgressBarCurrentPercentage.ToString() + "%"; 问题在于，当将新值分配给进度条时，进度条不会增加进度。 我相信这是因为进度条位于 UpdatePanel 中，并且我不想将进度条移到 UpdatePanel 之外。 我尝试在 UpdatePanel 的触发部分添加进度条，但它不起作用。 此代码对我有用： 标记： <div class="progress" style="width: 30%; margin: auto;float:left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar" > <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <br /> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="cmdIncrement" runat="server" Text="Increment" OnClick="cmdIncrement_Click" /> 背后代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) TextBox1.Text = "1"; setbar(0); } protected void cmdIncrement_Click(object sender, EventArgs e) { const decimal MyMax = 10; int Count = Convert.ToInt32(TextBox1.Text); Count++; TextBox1.Text = Count.ToString(); decimal MyPercent = Count / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 结果： 如果我使用更新面板，上面的方法也有效。 UpdatePanel（Ajax 工具包）。 不！ Ajax 工具包 100% 独立，与更新面板的使用“没有任何关系”。 AjaxToolKit 是一个控件库，如“accordion”、“dialog”、“ajaxfileupload”等。 但是，在网页中使用更新面板来采用某些ajax功能与ajaxtoolkit无关，并且您可以在没有ajaxtoolkit的情况下自由使用更新面板，并且它们实际上彼此不相关。 我还应该指出，如果您将上面的示例放置在更新面板中，上面发布的示例代码也可以工作。 编辑：问题作者现在想要一个循环 请记住，要进行 Web 开发，您必须掌握页面生命周期的概念，即所谓的“往返”。 简单说明： 在代码运行期间，用户永远不会看到通过代码隐藏对浏览器“DOM”进行的更改。浏览器的副本位于服务器上，当您的代码更改浏览器（现在位于服务器上）时，最终用户只会看到浏览器等待/旋转。只有在所有代码运行之后，然后浏览器返回客户端，用户才能看到结果。 因此，页面生命周期（往返）如下所示： 你有这个： 注意您的页面类 - 代码隐藏不在服务器的内存中。 你没有这个： 而你甚至没有这个： 注意这里非常小心 - 网页位于客户端计算机上 - 它根本不存在于网络服务器端。 因此，当您单击按钮或进行回发时，您就开始了往返。 这个： 我们的网页被发送到服务器。你现在有了这个： 现在页面类的实例已创建，并且后面的代码开始运行。 您的后台代码可以修改控件（甚至控件可见或不可见），但页面不与用户交互 - 只有代码可以修改网页（用户看不到一项或多项更改）。 网页可能会发生一次或多次更改，但是当您更新文本框等内容时，用户还看不到这些更改。因此，如果您运行循环 1 到 10，并更新文本框，则文本框将更新为 1 到 10。但是，最终用户看不到任何内容，因为该网页（和代码）正在服务器上运行。 服务器上正在发生网页更改 - 客户端浏览器不再有该网页！ 一旦所有代码运行完毕，页面才会返回客户端浏览器。 服务器端类实例和代码（和变量）已被丢弃 - 不存在！您的服务器端页面类已被处置 - 从内存中删除，并且后面的网页代码不再存在。 因此，页面返回到客户端，重新显示，加载 JavaScript，然后 JavaScript 开始运行。因此，即使是客户端页面现在也可以 100% 重新加载。 那么，现在已经掌握了上述关于回发和轮询类型（页面生命周期）的知识了吗？ 好的，这意味着要显示网页的更改，页面必须进行往返。如果您使用更新面板，那么该更新面板必须进行往返！ 这种循环的另一种方法是什么？您使用客户端 JavaScript 代码。 但是，让我们以上面现有的示例为例，当我们单击开始时，让我们循环 1 到 10，但请记住，我们需要往返才能显示浏览器更新！ 因此，既然我们需要往返，那么最简单的方法就是在页面上放置一个计时器控件。 （这意味着我们不必学习和编写一些 JavaScript 代码）。 所以，我们也使用更新面板。 （请记住，更新面板仍然具有上述完整页面生命周期 - 即使页面加载每次都会触发并运行 - 即使使用更新面板）。 所以，现在我们有了这个标记： <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="progress" style="width: 30%; margin: auto; float: left"> <div id="divProgressBar" runat="server" class="progress-bar" role="progressbar"> <a href="../App_Data/">../App_Data/</a> aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;"> 0% </div> </div> <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick"> </asp:Timer> <br /> <br /> <asp:Button ID="cmdStart" runat="server" Text="Start" CssClass="btn" OnClick="cmdStart_Click" /> <asp:HiddenField ID="HMyCount" runat="server" /> </ContentTemplate> </asp:UpdatePanel> 这段代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) setbar(0); } protected void cmdStart_Click(object sender, EventArgs e) { HMyCount.Value = "0"; Timer1.Enabled = true; } protected void Timer1_Tick(object sender, EventArgs e) { const decimal MyMax = 10; int Counter = Convert.ToInt32(HMyCount.Value); Counter++; HMyCount.Value = Counter.ToString(); if (Counter > 10) { Timer1.Enabled = false; // stop our timer return; } decimal MyPercent = Counter / MyMax * 100; setbar(MyPercent); } void setbar(decimal MyPercent) { divProgressBar.Style.Add("width", MyPercent + "%"); divProgressBar.Attributes.Add("aria-valuenow", MyPercent.ToString()); divProgressBar.InnerText = MyPercent.ToString() + "%"; } 现在的结果是这样的： 我应该发布一个有效的 JavaScript 示例，因为我们可以 100% 客户端运行此代码，这意味着不需要回发，也不需要往返。
当用户等待时正在进行大量数据库和第 3 方 cURL 查询时，我需要一个进度轮来显示。 进度轮应该立即自行显示，还是应该显示一次...
在我的数据网格中有一列，其中有进度条，当我引用给定数据网格中的特定行时，每个进度条都必须独立于其他进度条进行更改。 当尝试引用
如何在使用 C# 重新启动 SQL Server 服务时从头到尾加载进度条
抱歉，我是 C# 编程菜鸟。我曾多次搜索在重新启动 SQL Server 服务时加载进度条，但有很多代码，这让我很困惑。我不明白...
我使用 HTML、CSS 和 Javascript 创建了一个进度条。在提供 100 值之前它工作正常。如果我提供超过 100 个，那么它会完成进度，但价值仍然是保持不变...
情况 我正在处理一个有表单的页面。当单击表单中的按钮时，请求将发送到后端，并且页面会发生变化以显示它正在执行操作（进度...
我正在学习 svelteKit，我正在使用 props 构建一个步骤进度，所以，这是我的组件 ProgressStep.svelte 导出让步骤= []; 导出让当前步数 = 1; 常量 </desc> <question vote="0"> <p>我正在学习 <pre><code>svelteKit</code></pre>，并且我正在使用 <pre><code>props</code></pre> 构建逐步进度，所以，这是我的组件 <pre><code>progressStep.svelte</code></pre></p> <pre><code><script> export let steps = []; export let currentStep = 1; const isActive = (index) => { console.log(`isActive - index: ${index}, currentStep: ${currentStep}`); return index + 1 === currentStep; }; const isCompleted = (index) => { console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`); return index + 1 < currentStep; }; </script> <style> .progress-container { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 20px; } .progress-container::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #ddd; z-index: 0; } .progress-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .step-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ddd; } .step-active .step-circle { background: #007bff; color: white; } .step-completed .step-circle { background: #28a745; color: white; } .progress-line { position: absolute; top: 50%; left: 50%; height: 2px; background: #28a745; z-index: 0; } </style> <div class="progress-container"> {#each steps as step, index} <div class="progress-step {isActive(index) ? 'step-active' : ''} {isCompleted(index) ? 'step-completed' : ''}"> <div class="step-circle">{isCompleted(index) ? '✓' : index + 1}</div> <div>{step}</div> {#if index < steps.length - 1} <div class="progress-line" style="width: {isCompleted(index) || isActive(index) ? 'calc(100% - 15px)' : '0'};"></div> {/if} </div> {/each} </div> </code></pre> <p>我在 <pre><code>+page.svelte</code></pre></p> 上导入这个组件 <pre><code><script> import ProgressStep from '@/components/progressStep/progressStep.svelte'; let currentStep = 1; function nextStep() { if (currentStep < 4) currentStep += 1; } function prevStep() { if (currentStep > 1) currentStep -= 1; } </script> <section class="section mt-4"> <div class="col-xs-12"> <div class="col-6 my-4"> <ProgressStep currentStep={currentStep} steps={['Step 1', 'Step 2', 'Step 3', 'Step 4']} /> <div class="btn-group"> <button class="btn btn-secondary" on:click={()=>prevStep()}>Previous</button> <button class="btn btn-primary" on:click={()=>nextStep()}>Next</button> </div> </div> </div> </section> </code></pre> <p>我想构建像 <a href="https://codepen.io/vikas001/pen/bJzdaj" rel="nofollow noreferrer">codepen.io</a></p> 这样的一步进度条 <p>大约有 4 步进度，随着进度，连接每个步骤的线必须改变颜色，所以目前我遇到一些问题，进度无法正常工作，出了什么问题？</p> </question> <answer tick="true" vote="1"> <p>这里的主要问题是这些函数具有“隐藏”依赖关系，因此一旦步骤发生变化，它们将不会被重新评估。</p> <p>这可以通过反应性地声明函数来解决，函数体中变量的更改将导致函数被重新定义，然后如果在标记（或其他反应性代码）中使用，则被调用。</p> <pre><code>$: isActive = (index) => { console.log(`isActive - index: ${index}, currentStep: ${currentStep}`); return index + 1 === currentStep; }; $: isCompleted = (index) => { console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`); return index + 1 < currentStep; }; </code></pre> <p>由于这些已经是箭头函数，您只需要将 <pre><code>const</code></pre> 替换为 <pre><code>$:</code></pre>。</p> </answer> </body></html>
我正在学习 svelteKit，我正在使用 props 构建一个步骤进度，所以，这是我的组件 ProgressStep.svelte 导出让步骤= []; 导出让当前步数 = 1; 常量 </desc> <question vote="0"> <p>我正在学习 <pre><code>svelteKit</code></pre>，并且我正在使用 <pre><code>props</code></pre> 构建逐步进度，所以，这是我的组件 <pre><code>progressStep.svelte</code></pre></p> <pre><code><script> export let steps = []; export let currentStep = 1; const isActive = (index) => { console.log(`isActive - index: ${index}, currentStep: ${currentStep}`); return index + 1 === currentStep; }; const isCompleted = (index) => { console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`); return index + 1 < currentStep; }; </script> <style> .progress-container { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 20px; } .progress-container::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #ddd; z-index: 0; } .progress-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .step-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ddd; } .step-active .step-circle { background: #007bff; color: white; } .step-completed .step-circle { background: #28a745; color: white; } .progress-line { position: absolute; top: 50%; left: 50%; height: 2px; background: #28a745; z-index: 0; } </style> <div class="progress-container"> {#each steps as step, index} <div class="progress-step {isActive(index) ? 'step-active' : ''} {isCompleted(index) ? 'step-completed' : ''}"> <div class="step-circle">{isCompleted(index) ? '✓' : index + 1}</div> <div>{step}</div> {#if index < steps.length - 1} <div class="progress-line" style="width: {isCompleted(index) || isActive(index) ? 'calc(100% - 15px)' : '0'};"></div> {/if} </div> {/each} </div> </code></pre> <p>我在 <pre><code>+page.svelte</code></pre></p> 上导入这个组件 <pre><code><script> import ProgressStep from '@/components/progressStep/progressStep.svelte'; let currentStep = 1; function nextStep() { if (currentStep < 4) currentStep += 1; } function prevStep() { if (currentStep > 1) currentStep -= 1; } </script> <section class="section mt-4"> <div class="col-xs-12"> <div class="col-6 my-4"> <ProgressStep currentStep={currentStep} steps={['Step 1', 'Step 2', 'Step 3', 'Step 4']} /> <div class="btn-group"> <button class="btn btn-secondary" on:click={()=>prevStep()}>Previous</button> <button class="btn btn-primary" on:click={()=>nextStep()}>Next</button> </div> </div> </div> </section> </code></pre> <p>我想构建像 <a href="https://codepen.io/vikas001/pen/bJzdaj" rel="nofollow noreferrer">codepen.io</a></p> 这样的一步进度条 <p>大约有 4 步进度，随着进度，连接每个步骤的线必须改变颜色，所以目前我遇到一些问题，进度无法正常工作，出了什么问题？</p> </question> <answer tick="false" vote="0"> <p>这里的主要问题是这些函数具有“隐藏”依赖关系，因此一旦步骤发生变化，它们将不会被重新评估。</p> <p>这可以通过反应性地声明函数来解决，函数体中变量的更改将导致函数被重新定义，然后如果在标记（或其他反应性代码）中使用，则被调用。</p> <pre><code>$: isActive = (index) => { console.log(`isActive - index: ${index}, currentStep: ${currentStep}`); return index + 1 === currentStep; }; $: isCompleted = (index) => { console.log(`isCompleted - index: ${index}, currentStep: ${currentStep}`); return index + 1 < currentStep; }; </code></pre> <p>由于这些已经是箭头函数，您只需要将 <pre><code>const</code></pre> 替换为 <pre><code>$:</code></pre>。</p> </answer> </body></html>
我正在尝试在Google应用程序脚本中创建一个进度条，当有人单击按钮（Go）时，它会自动缓慢地从开始到结束。您在 Firefox 下载中看到的东西...
在 scriptUi 中，我能够按照以下说明为长时间等待创建一个简单的进度旋转器：https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/
我有一个小型 GUI 测试，带有“开始”按钮和进度栏。期望的行为是： 单击开始 进度条摆动 5 秒 进度条停止 观察到的行为是“开始”...