Once again I find myself in this situation:
- I run into a small problem
- I google it: can't find a solution
- Try to fix it myself: success
I am hoping that by posting this article I will help out a person or two.
UPDATE: a day later, the problem is back, this post is thereby useless. If you know a proper solution I'm all ears! ;-(
What's the problem?
The jQuery UI progress bar widget is useful in a lot of situations and it's easy to use. When you set its value to "false" (indeterminate/unset), the progress bar animates nicely. The end user feels like something is actually happening.
The problem I've been having is that the progress bar RANDOMLY doesn't animate in my project. I'm sure I must have done something wrong at some point, but the project is so huge that it would take too long to root out the issue on my end. As a result, my users are under the impression that my application has crashed and they reload the page (while they should just be waiting for the operation to complete).
This is a simple fix. When animated, the progress bar uses the CSS class "ui-progressbar-overlay". This class gets its background from an inline GIF (base 64 encoded within the CSS file).
How to fix it?
Open your jQuery UI CSS file, look for the "ui-progressbar-overlay" class, and replace the inline GIF by an external image (the original image can be found here).
Example:
.ui-progressbar-overlay{background:url("images/overlay.gif")
That's it! Save your files, refresh your cache and voila.
NOTE: this article has been updated. This did not actually solve the problem. I thought it did because it worked for a while, but now it has stopped working again.
NOTE: this article has been updated. This did not actually solve the problem. I thought it did because it worked for a while, but now it has stopped working again.