Creating a loading screen in HTML5

Question

I am having some issues finding a decent tutorial for generating a loading style screen with regards to HTML5. To be quite honest I\'m not sure exactly where to begin...

<

Answer 1

This is an excellent resource for demonstrating HTML5 CSS animation. http://slides.html5rocks.com/#css-animation

 @-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

This demonstrates how to create a loading status bar: http://slides.html5rocks.com/#semantic-tags-2

 working...

There are plenty of other examples on those slides as well that may have what you're looking for.