Spinners cause anxiety. Why not use the loading time to calm your users? This CSS animation floats clouds gently across the screen and finishes with a positive sunrise message!

Cloud Construction

A standard cloud is just a combination of intersecting border-radius circles.

.cloud-base {
  width: 100px; height: 30px;
  background: white; border-radius: 50px;
}
.cloud-dome {
  width: 50px; height: 50px;
  background: white; border-radius: 50%;
  position: absolute; top: -20px; left: 15px;
}

Wait 5 seconds in the Live Demo to see the magnificent sun transition!