Skip to content

Instantly share code, notes, and snippets.

@mrazzari

mrazzari/index.html

Last active May 7, 2016 13:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrazzari/8b4879b6568bfdeeed08833884314d22 to your computer and use it in GitHub Desktop.
Save mrazzari/8b4879b6568bfdeeed08833884314d22 to your computer and use it in GitHub Desktop.
Download ZIP
Bulletproof static redirect
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loading&hellip;</title>
<meta http-equiv="Refresh" content="0; url=http://www.example.com/">
<!-- JS is our first option. Faster than the meta refresh.
But if none of these automated options work, wait 2 seconds
to show a "click here" message, using CSS animations.
-->
<script>
window.location.href = "http://www.example.com/";
</script>
<style>
body {
font-size: 2em;
font-family: sans-serif;
color: #444;
}
p {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
@keyframes fadein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadein {
0% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<!-- If automatic doesn't work, show a link the user can activate. -->
<h1>Loading&hellip;</h1>
<p>Please click <a href='http://www.example.com/'>here</a> to continue.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment