Sha256: c4cea6212ace1574e6e7cd29aa34612e9cc6bc5fb0779a3fea9fdeee83aaf44e
Contents?: true
Size: 1.33 KB
Versions: 91
Compression:
Stored size: 1.33 KB
Contents
<!doctype html>
<html>
<head>
<link href="/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Droid Sans'],
api: '/fonts/api',
blocking: false
}
});
</script>
<style type="text/css">
/* Show and style the loading message while fonts are loading */
html.wf-loading #loading-message {
display: block;
color: #999;
}
/* Hide the content while fonts are loading */
html.wf-loading #content {
display: none;
}
/* Hide the loading message after fonts render */
html.wf-active #loading-message {
display: none;
}
html.wf-active h1 {
font-family: 'Droid Sans';
}
</style>
</head>
<body>
<h1 id="loading-message">
I'm loading!
</h1>
<h1 id="content">
Hello World. I am Droid Sans.
</h1>
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
<a href="/event-css-loading.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use CSS to show a loading message while the
headline's font is loading, then hide the loading message and show the
headline once the font has rendered.
</p>
</body>
</html>
Version data entries
91 entries across 91 versions & 1 rubygems