Pure CSS spinner in reality

1. Already adapted: new background-color for the spinner; z-indexes added for stacking order of spinner and image.
2. The Scale Models are fast loading images (29kB each), but we see a flash of the spinner (especially for #2).
3. The Special picture had a typo in the image source, it's a 404: image not found. Now the spinner is outside the box, and forever spinning.
4. IE-11, yes, is giving a fancy height to the image (but it seems that this height has no correlation with the width of the img).
5. The Former Pond panorama has a medium size (278kB), a flashing spinner and a rendering in 2 not very beautiful steps.
6. The Lighthouse picture and the Landscape panorama are really big: 4MB and 10.7MB. The rendering is in discrete strips of around 100px to 140px high (in Chrome, Opera, IE11), or the image is coming down more or less continually (in Firefox).

Note: during the download, the browser-tabs are presenting a spinner too (instead of the favicon). In Chrome it's a green one, rather like my spinner, but it's not the same. In Opera and IE-11 it's a grey spinner. Firefox has a variant: the loading signal in the tab is a green left-right moving particle.

What to do

1. Avoid the spinner flash for small and medium images with a delay for the spinner + a fade-in for the spinner.
2. 404-images: give min-height to the imgBox, and replace after some time the spinner by a not-found message.
3. Medium size and big size images: make a fade-in of the image after completed loading.