Beautiful CSS3 loading animation overlay with custom message

I recently stumbled over a beautiful loading animation that is completely done in CSS3 (link):

Loader Animation GIF

All i had to do was fixing a small bug (link), adding some JavaScript and adding an semi-transparent overlay, so all credits go to Hugo Giraudel.

I centered the loading animation div and added a field to display a text message.

To allow for easy display and hiding i cooked up some JavaScript that shows the overlay and puts the text message (or a default message) in the right place.

Continue reading