public
Last active

CSS3 Loading Overlay

  • Download Gist
example.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<!doctype html>
<html>
<head>
 
<link type="text/css" rel="stylesheet" href="common.loading.css">
</head>
<body class="loading">
<p>Funky fresh da bomb dolizzle sizzle amizzle, stuff adipiscing doggy. Nullizzle yo mamma shut the shizzle up, aliquet volutpizzle, suscipit quizzle, gravida vizzle, arcu. Pellentesque eget tortor. Sed erizzle. Pimpin' ghetto check it out mammasay mammasa mamma oo sa turpizzle tempus fizzle. Yo pellentesque nibh et turpis. Funky fresh my shizz tortor. Pellentesque shizznit rhoncizzle check out this. In break yo neck, yall phat platea dictumst. Mah nizzle dapibizzle. Yippiyo tellus urna, pretizzle away, yo mamma ac, phat vitae, nunc. We gonna chung suscipizzle. Shiznit sempizzle nizzle you son of a bizzle purus.</p>
 
<p>Sizzle black urna, luctizzle et, gangster izzle, sollicitudizzle bizzle, nulla. Donizzle yo mamma, nisi my shizz facilisis , neque justo bling bling shizznit, mollizzle fringilla libero break it down izzle black. Sizzle aptent taciti sociosqu izzle dizzle dope sure conubia nostra, pizzle pimpin' hymenaeos. Tellivizzle maurizzle fo shizzle, scelerisque shizznit, iaculizzle vel, accumsizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle, elit. Nunc shizznit. Fusce velizzle fizzle, accumsizzle eu, izzle nec, molestie pot, sapizzle. Fo shizzle condimentizzle. Aenean nizzle my shizz non gizzle da bomb that's the shizzle. Integizzle dope felizzle, my shizz izzle, uhuh ... yih! quis, ghetto nizzle, ligula. Maecenizzle izzle dizzle. Dizzle nibh. Break yo neck, yall enim. Nulla blandit. Fizzle metizzle things, sempizzle , lobortizzle rizzle, molestie we gonna chung, fo. Morbi mi gangster, sempizzle sed, dapibus eu, pretizzle shizznit, crazy. Morbi dictum tellus quizzle yippiyo tempizzle owned.</p>
 
<p>Nunc quis arcu. Gangsta ante. Its fo rizzle break yo neck, yall mauris rizzle fo. Morbi izzle get down get down. Phat izzle sheezy you son of a bizzle shit consectetizzle condimentum. Lorizzle check out this dolizzle sit amizzle, consectetuer adipiscing shit. Curabitizzle elizzle arcu, own yo' non, shiz da bomb, mollizzle izzle, fizzle. Bizzle fo shizzle volutpizzle. Hizzle yippiyo posuere turpizzle. Fizzle fizzle. Crackalackin we gonna chung break it down, that's the shizzle rizzle, volutpizzle vitae, mofo sed, sapizzle. Mah nizzle sizzle orci, ass nec, sodalizzle izzle, commodo pimpin', orci.</p>
 
<p>Gizzle commodo fo shizzle my nizzle ut sheezy. Nullam break it down. Vestibulizzle own yo' laorizzle shizzlin dizzle. Quisque sit amizzle for sure check out this own yo' volutpat bow wow wow. Suspendisse phat. Nunc bizzle sem vitae you son of a bizzle tincidunt aliquizzle. Bow wow wow gravida brizzle ante. Boom shackalack interdizzle erat dope sem. Ma nizzle phat. I'm in the shizzle vitae dizzle shizznit dizzle mammasay mammasa mamma oo sa viverra. facilisi. Nullam quizzle i'm in the shizzle a massa molestie pulvinar. Nullizzle tellivizzle dui fo shizzle for sure. Crizzle the bizzle sizzle sizzle tellizzle. We gonna chung pretium break it down daahng dawg dui. Maecenizzle rutrum shiz purizzle.</p>
 
<p>Things dignissizzle nisi quis justo molestie i'm in the shizzle. Sizzle ligula brizzle, dapibizzle ac, lobortis izzle, molestie at, check it out. Sizzle yippiyo. Suspendisse consectetizzle. Fo shizzle my nizzle sheezy erizzle, sizzle, shiz nec, bibendizzle izzle, fizzle. Suspendisse away dolor. Crackalackin vizzle own yo'. Shiz rizzle nibh. Fo shizzle consequizzle. Brizzle dignissizzle fo shizzle vizzle arcu. Ut ass sem mammasay mammasa mamma oo sa sizzle eleifend eleifend. Doggy pulvinizzle, nibh non away phat, shiznit libero fo erizzle, vehicula elementum augue nunc fo shizzle my nizzle black. Quisque da bomb break yo neck, yall dolor. Aliquizzle erat nizzle. In tellivizzle, dui fo shizzle ma nizzle consequat, massa mammasay mammasa mamma oo sa gravida elit, at mofo enizzle nizzle sed shut the shizzle up.</p>
 
<p>Nulla eu ligula. I saw beyonces tizzles and my pizzle went crizzle porta commodo tellizzle. Bling bling viverra, hizzle izzle fo shizzle hendrerit, libero doggy dang shizzle my nizzle crocodizzle, non condimentizzle nunc sapizzle my shizz nunc. Shizzle my nizzle crocodizzle eu dolizzle. Vestibulizzle funky fresh own yo'. Sed elementum faucibus erizzle. Own yo' nulla fizzle, the bizzle id, volutpizzle phat, auctizzle the bizzle, dang. Fizzle stuff. Mofo nisi. Curabitur sizzle amet leo yo mamma ante blandit dignissizzle. Fo shizzle laoreet boofron sizzle da bomb enim. Aenizzle tempizzle ma nizzle shiz.</p>
 
</body>
</html>
readme.md
Markdown

Loading Overlay

A common loading overlay for web apps using a single CSS3 style and no extra DOM elements.

Works in Webkit browsers (for now).

Usage

Load the CSS stylesheet and using the loading class on the body tag.

View the example

Customizing

You can any of the attributes using the body.loading:after selector...

Credits

Initiated by Makis Tracend

Published as a Commons component

Distributed under the MIT license

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.