Questions tagged [progress-bar]

A progress bar is a component in a graphical user interface used to convey the progress of a task, such as a download or file transfer.

A progress bar is a component in a graphical user interface used to convey the progress of a task, such as a download or file transfer. The graphic is often displayed as a bar which illustrates the task percentage complete. Descriptive textual information may accompany the bar.

enter image description here

Typically, determinate progress bars use a linear function, such that the advancement of a progress bar is directly proportional to the amount of work that has been completed. However, varying disk, memory, processor, bandwidth and other factors complicate this estimate. Consequently, progress bars often exhibit non-linear behaviors, such as acceleration, deceleration, and pauses. These behaviors, coupled with humans' non-linear perception of time passing, produces a variable perception of how long progress bars take to complete. However, this also means progress bars can be designed to "feel" faster. Finally, the graphical design of progress bars has also been shown to influence humans' perception of duration

Indeterminate progress bars, on the other hand, provide a simple animation (often in the for of a spinning ring or an horglass).
These are meant to indicate that an operation is currently running, but it's not known when it will be over.

They may look similar to this:

enter image description here

7560 questions
39
votes
12 answers

What is the best way of showing progress on an Ajax call?

I have an Ajax call that updates 5,000 records in a database so this takes a lot of time. I have an Ajax "Loading image" showing that something is happening, but I am looking for a better way to show "Updating 50 of 5000 . . .", "Updating 200 of…
leora
  • 188,729
  • 360
  • 878
  • 1,366
39
votes
5 answers

jQuery UI: How to change the color of a ProgressBar?

I've set up a simple jQueryUI progressbar:
Now, I'd like to color the…
Thorsten
  • 12,921
  • 17
  • 60
  • 79
38
votes
6 answers

File Copy with Progress Bar

I used this code: using System; using System.Collections.Generic; using System.ComponentModel; using System.Windows.Forms; using System.IO; namespace WindowsApplication1 { public partial class Form1 : Form { // Class to report progress …
patlimosnero
  • 963
  • 4
  • 13
  • 22
38
votes
5 answers

Simple cross-browser, jQuery/PHP file upload with progress bar

I know there are several topics out there about this, but none of them offered a definite solution for a file uploader script that: Works on IE7+ Has a progress bar (On every browser) No Flash (Or fallback) Any solutions?
Tom
  • 1,217
  • 3
  • 12
  • 15
37
votes
19 answers

How to make a progress bar

How would one go about making a progress bar in html/css/javascript. I don't really want to use Flash. Something along the lines of what can be found here: http://dustincurtis.com/about.html All I really want is a 'progress bar' that changes to the…
john mossel
  • 2,158
  • 5
  • 24
  • 39
37
votes
5 answers

Angularjs $http and progress bar

I need to upload file and I use $http (this code is get from my .service() function): sendFile: function (params) { return $http({method : 'post', url : 'http://XXXXXXXXXXXXX/rest/file.json', headers : {…
ZioBudda
  • 948
  • 2
  • 12
  • 24
37
votes
6 answers

YouTube-like progress bar

I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script $({property: 0}).animate({property: 105}, { duration: 4000, step: function() { var…
Swagata Barua
  • 385
  • 1
  • 3
  • 9
36
votes
3 answers

stdout progress bars don't work in Pycharm

Many programs display progress bars by printing to stdout and then returning to beginning of line and printing again. This way they can achieve realtime progress bar appearence. Unfortunately, in many cases this functionality does not work in…
Dims
  • 47,675
  • 117
  • 331
  • 600
36
votes
10 answers

Smooth Progress Bar Animation

I'm trying to implement a smooth animation for my ProgressBar, but when I increase the time (30 seconds), the animation is no longer smooth. Example with 5 seconds: Example with 30 seconds: My progress background:
rsicarelli
  • 1,013
  • 1
  • 11
  • 28
36
votes
9 answers

Console based progress in Java

Is there are easy way to implement a rolling percentage for a process in Java, to be displayed in the console? I have a percentage data type (double) I generated during a particular process, but can I force it to the console window and have it…
Monster
  • 1,573
  • 6
  • 23
  • 35
35
votes
5 answers

jQuery to change values of progress-bar "aria-valuenow" attribute and CSS "width" property

I have a progress bar on my page (Bootstrap) that looks like this:
I would…
Ray_Hack
  • 973
  • 2
  • 9
  • 27
34
votes
6 answers

Android: The progress bar in the window's title does not display

I have a web view to override the built-in browser and I want to show a progress indicator on the title bar. This is the code: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); …
Manu
  • 1,013
  • 1
  • 11
  • 20
34
votes
7 answers

How to stop and start a ProgressBar

I am unable to stop a ProgressBar. Its style is ProgressBarStylesmall. How can I start and stop a circular, small ProgressBar?
saqibabbasi
  • 423
  • 1
  • 5
  • 9
33
votes
2 answers

show progressbar while loading pages using jquery ajax in single page website

I have a basic page with a navigation bar on top, and a wrapper body. Whenever a user clicks on a navigation link it uses .load to load the page content into the wrapper div. $(this).ajaxStart(function(){$('.progressbar…
Zalaboza
  • 8,899
  • 16
  • 77
  • 142
31
votes
4 answers

How to create a Circular Style ProgressBar

I need help on implementing a circular progress bar like this: How should I implement the Circle to fill by increasing Value property?
Jalal
  • 6,594
  • 9
  • 63
  • 100