I have an application which sometime needs more than a second to calculate data. At the moment I just popup a div with high z-index a border and a “loading…” text. This is not very smart especially when the background has nearly the same colors and is very big, you can not see it very good.
So I thought about something more cool and modern thing like a spinning wheel or another fancy thing. I do not know how long the calculation takes as it depends on many http request and you never know the quality of your connection. So I cannot use a progress bar.
Also I want to have the color #6400a0 in it.
Best choice would be if I can use it in any size. Lets say from 50 to 500 pixel (But that’s not a must have)
I tried to search for it in the web, but to be honest I do not found anything which catches me up.
Has anyone an idea (Might be only a draft to be improved)
I suggest you could have a progress bar that increases every time an http request is received. Presumably you know how many requests are to be made.
To avoid the issue of visibility when the background is nearly the same colour as your popup box, I suggest covering the web page with a semitransparent <div> as the lightbox technique. I use black background to the <div> with opacity 0.6.
So the user thinks something is happening, you could display a series of short messages like you often get while software is installing. That is not to stop you also displaying a spinning graphic and/or progress bar. If it could take a minute or so to display the result of the calculation, you need something more than a spinning graphic.
Have you checked on what price comparison websites display while getting price data?
I think, one way or another, you need to abort the process if it takes too long to receive a request: say more than 90 seconds. Also I think you should provide a ‘Cancel’ button that the user can click if they don’t want to wait any longer.