Defined timing for html pre-loader

Question

I have this site that loads iframes from different sites. I'd like to put a pre-loader that occupies the whole page for a definite time, like 10 seconds, etc... not when just the page finished loading.

The plan is like to put a pre-loader for 10 seconds and make it disappear. Ignoring whether the iframes finished loading or not.

Codes I've seen only gives something like

100% {
    opacity: 0;
  }

Answer 1

how about making the entire body fade in over 10 seconds like this?:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
   opacity: 1;
  }
}

body {
  -webkit-animation: fadeIn 10s;
  animation: fadeIn 10s;
}

Optionally you can add a delay at the beginning:

animation-delay: 2s;

This would better hide the page while it was loading, so long as it was predictably less than the time it would take to load, you would be best of with somehow really observing the iframes loading but thats another topic: