Skip to content

Instantly share code, notes, and snippets.

@tohagan
Last active September 28, 2020 08:08
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 tohagan/ebceb8cee42638b61011eddca143c7ec to your computer and use it in GitHub Desktop.
Save tohagan/ebceb8cee42638b61011eddca143c7ec to your computer and use it in GitHub Desktop.
Vue / HTML slow loading warning
<html>
<head>
<style>
#showWarning {
opacity: 0;
animation: cssAnimation 0s 10s forwards;
-moz-animation: cssAnimation 10s; /* Firefox */
-webkit-animation: cssAnimation 10s; /* Safari/Chrome */
-o-animation: cssAnimation 10s; /* Opera */
animation: cssAnimation 10s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
99% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes cssAnimation {
99% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div id="q-app">
<div id="showWarning">
Sorry ... I'm not loading today 😔. Your network might be slow 🐌 or your phone software or browser may need to be 👉 updated 👈.
</div>
</div>
...
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment