Pure CSS spinner in reality
... CSS improvements ...
- Repeat in Firefox/Chrome (empty cache / hard reload): Ctrl + Shift + R; in IE-11: Ctrl + F5; see cache-test for more.
Scale Model 1
Scale Model 2
CSS fun
Former Pond
Land in Sight
Calm Afternoon
Realisation
- At 0 sec the images (for so far already loaded) are rather quick fading in during .5 sec.
- While at the same moment the whole page (design, text, etc.) is rendering/appearing, this will have no drawback for the user experience. As a bonus we can smoothly fade-in the whole page in .75 sec. - At 0 sec the spinner is already spinning, but has zero opacity.
- At .3 sec the spinner is fading in during 1 sec.
- This is eliminating the spinner flash for fast loaded images, and has no harm for other possibilities (slower images or missing images). - At 2 sec the message "searching..." is fading in during 1 sec, preparing the
visitor for a missing image
.
- Has no harm for fast loaded images (because of the z-index the images are in the layer above), nor for slower images (the first rendered strips will start on the upper side and also cover the message). - At 4 sec the message "searching..." is fading out during 1 sec.
- At 4 sec the spinner is soft fading out during 3 sec.
- The disappearing spinner has no harm for slow loading images: the spinner is in the vertical middle of the image, and the image is already coming down (or even loaded completely). - At 6 sec the message "Oops ... image missing" is fading in during 3 sec, and
will stay on screen.
- In this way the visitor is not confronted with a visual disturbing and useless attention drawing never-ending spinner. When the message is missed (due to scrolling in the meanwhile), at a comeback it is still there in a modest way.
Fallback: in case an image is not missing but has a delay for some reason and is starting the download later then the 6 sec (!) after the page start, there is something really wrong at the server or in the coding, but no problem. As soon as the image is downloaded, it will cover the "seems missing" message: it just seemed, but that appeared not to be true. Everybody happy, if the visitor hasn't left the page... .
Construction
<div class="imgBox">
<div class="spinner"></div>
<img src="images/..." alt="...">
</div>
<script> /* none */ <script>
.imgBox {
/* as before, added: */
min-height: 120px;
}
.imgBox:before {
position: absolute;
top: 1%;
left: 0;
right: 0;
content: "... Heavy searching ...";
font-size: 1.3em;
color: #FF4040;
text-align: center;
z-index: -1;
opacity: 0;
animation:
1s 2s spinnerFadeIn ease-in-out
forwards,
1s 4s spinnerFadeOut ease-in-out
forwards;
}
@keyframes spinnerFadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes spinnerFadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
.imgBox:after {
position: absolute;
top: 15%;
margin-top: 1em;
left: 0;
right: 0;
content: "Oops, it seems this image is missing ...";
text-align: center;
color: #404404;
z-index: -1;
opacity: 0;
animation:
3s 6s spinnerFadeIn ease-in-out
forwards;
}
.imgBox img { /* as before, added: */
opacity: 0;
animation:
.5s spinnerFadeIn ease-in-out
forwards;
}
body { /* as customized, added: */
opacity: 0;
animation:
.75s spinnerFadeIn ease-in-out
forwards;
}