标签: progress-bar

价值变化的进度元素的过渡

我正在尝试progress使用 CSS向元素添加过渡,以便当它的值发生变化时,它将平滑地移动容器内的进度条。我遇到的问题是让过渡完全起作用,我不知道在哪里放置这样的过渡,因为:hover例如当值发生变化时(不是我所知道的)。那么我正在尝试做的事情是可能的,如果是的话,怎么做?

下面的代码片段:

progress {
  display: block;
  vertical-align: baseline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  margin: 1px auto;
  height: 10px;
  background: yellow;
  transition: all 5s ease 0; /* Does not work */
}
  progress[value]::-webkit-progress-value {
    background: red;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-webkit-progress-bar {
    background: yellow;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-moz-progress-bar {
    background: red;
    transition: all 5s ease …
Run Code Online (Sandbox Code Playgroud)

css css-transitions progress-bar

2
推荐指数
1
解决办法
1358
查看次数

使 Inno Setup Installer 向主安装程序报告其安装进度状态

我目前有两个 Inno Setup 安装程序。我需要其中一个将其作为子安装程序的状态报告给另一个安装程序,即使它使用VERYSILENT命令运行。

我需要这个来根据子安装程序的安装进度在我的主安装程序中显示一个进度条,因为我不想要任何无限(字幕)进度条。

我还阅读了Delphi 中的 IPC 机制。如何将这种通信能力(如泵)添加到 Inno Setup 源代码中?有什么开始的提示吗?

提前致谢。

installation ipc inno-setup progress-bar

2
推荐指数
1
解决办法
1709
查看次数

使用按需资源更新进度条

大家好,我想了解更多有关让进度条快速工作的信息。我似乎无法在目标 C 或电视中找到有意义的信息。

下面是我用来下载辅助的代码。任何帮助,将不胜感激。

 request = NSBundleResourceRequest(tags: [tag])
    request.beginAccessingResources { (error) in
        //  Called on background thread
        if error == nil {

            }
            OperationQueue.main.addOperation({ () -> Void in
               self.continueBtton.isEnabled = true
            })


        }
    }
Run Code Online (Sandbox Code Playgroud)

progress-bar swift

2
推荐指数
1
解决办法
787
查看次数

在 StatusStrip 中的进度条上显示文本

我是Windows 编程新手。在 C# 中,我使用 Visual Studio 2017。现在,我遇到了一个问题。问题是,我试图在 中显示一些文本(进度值),ProgressBarStatusStrip找不到正确的工作方法来做到这一点。:-(

任何人都可以为我提供一些想法或解决方案来解决这个问题吗?我会很高兴并感谢你!您的回答将不胜感激。:-)

.net c# statusstrip winforms progress-bar

2
推荐指数
1
解决办法
4407
查看次数

Dask ProgressBar 不适用于分布式后端

进度条与multiprocessing后端一起使用时效果很好,但在使用distributed调度程序作为后端时似乎根本不起作用。

有没有解决的办法?还是另一种解决方案?该distributed软件包本身有一些进度条,但它们都需要一个期货列表才能工作。

python distributed progress-bar dask

2
推荐指数
1
解决办法
1492
查看次数

同一组件内的多个 JSF progressBar

我正在尝试使用每个批处理的进度条来显示几个批处理的进度。问题是只有一个进度条被发送到服务器端(最后一个)。这是代码...

我为进度制作了一个 RequestScoped Named bean,因为我读到,对于多个 progressBar,每个进度条都需要一个 bean 实例,但这并不能解决我的问题。

我在 JSF 2.2 中使用 Primefaces 6.1。

有任何想法吗?谢谢!

<h:form id="formExecutions">        
        <p:dataGrid id="jobs" value="#{jobExecutorController.jobExecutions}" var="job" rows="5" paginator="true" emptyMessage="#{MessageResources['text.noRecordsFound']}"
        paginatorPosition="bottom" columns="1" layout="grid">
            <f:facet name="header">
                #{MessageResources['text.batchProcesses']}
            </f:facet>

                <p:outputPanel layout="block" >
                    <p:panelGrid  cellpadding="5" styleClass="vf-panelGrid">            
                        <p:row style="width:100%">  
                            <p:column>                  
                                <p:outputLabel for="executionId" value="#{MessageResources['text.executionId']}:" style="font-weight:bold"/>                    
                            </p:column>
                            <p:column>                              
                                <h:outputText id="executionId" value="#{job.executionId}" />
                            </p:column>
                            <p:column>                      
                                <p:outputLabel for="name" value="#{MessageResources['text.name']}:" style="font-weight:bold"/>
                            </p:column>
                            <p:column style="width:10%">                        
                                <h:outputText id="name" value="#{job.name}"/>
                            </p:column> 

                            <p:column  style="width:50%" rowspan="2">                           
                                <p:progressBar id="progressBar" widgetVar="progressBar" ajax="true" value="#{progressController.progress(job)}" labelTemplate="{value}%" styleClass="animated" style="height: 20px; line-height: 20px;" global="false" interval="3000">
                                    <p:ajax …
Run Code Online (Sandbox Code Playgroud)

jsf primefaces progress-bar

2
推荐指数
1
解决办法
487
查看次数

HTML - 如何生成带有百分比的进度条圆圈并使用 JS 或 jQuery 设置值?

我需要有一个圆形进度条,我可以用它来向用户显示他们在测试中获得的百分比。理想情况下,会有一些固定的 HTML,然后更改 JavaScript 或 jQuery 中的值。它们可能看起来像下面的任何圆圈。 像这样


先感谢您。

javascript css jquery percentage progress-bar

2
推荐指数
2
解决办法
1万
查看次数

更新 Tkinter 进度条

我已经制作了一个用于从网站下载多个文件的 python 脚本,我想在 Tkinter 中制作一个进度条,当每个文件保存到计算机时,它应该更新。我看过一些使用 OOP 的例子,但我仍然在掌握 OOP,希望有一天能理解为什么人们在 Tkinter 中制作 GUI 应用程序时使用 OOP。也许好心的用户可以为我澄清这一点。

我的代码显示在这里:

from Tkinter import *
import ttk
import numpy as np

global files
files = np.arange(1,1000000)

def loading():
    global downloaded
    downloaded = 0
    for i in array:
        downloaded +=1

root = Tk()

progress= ttk.Progressbar(root, orient = 'horizontal', maximum = 1000000, value = downloaded, mode = 'determinate')
progress.pack(fill=BOTH)
start = ttk.Button(root,text='start',command=loading)
start.pack(fill=BOTH)

root.mainloop()
Run Code Online (Sandbox Code Playgroud)

我创建了一个代表文件数量的变量(我并不是真的想下载 1000000 个文件,这只是一些让进度条工作的代码)。

当点击开始按钮时,代码应该运行加载功能,但它没有。我非常感谢您在这个问题上能给我的任何帮助 =)

python oop tkinter progress-bar

2
推荐指数
1
解决办法
4380
查看次数

角度材料进度条不起作用 - 产生虚线

我正在尝试在 Angular 中创建一个联系表单,并且我希望在用户单击提交时使用 Angular Material 显示一个不确定的进度条。

我按照官方 Angular Material 网站 ( https://material.angular.io/components/progress-bar/overview )上提到的步骤进行操作。但是,当我将它包含在我的 Web 应用程序中时,进度条只会显示为虚线。

显示问题的 PFB 屏幕截图:

[界面截图1

代码片段:

VS 代码截图

任何人都可以请教为什么 Angular-Material 进度条会这样,以及可能的解决方案吗?

progress-bar angular-material angular

2
推荐指数
1
解决办法
3831
查看次数

如何通过 JavaScript 使进度条缓慢移动

当我将它的宽度增加 10% 时,它会突然应用,我希望它有一些平滑的运动。

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}
Run Code Online (Sandbox Code Playgroud)
#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container  --> …
Run Code Online (Sandbox Code Playgroud)

html javascript css progress-bar

2
推荐指数
2
解决办法
2543
查看次数