You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
3.7KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <meta name="theme-color" content="#2A4365" />
  7. <title>Page preloader Labwork</title>
  8. <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  9. </head>
  10. <body class="min-h-screen flex flex-col items-center bg-blue-900 text-gray-200">
  11. <div id="page-preloader"
  12. style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;background: fixed #2A4365 url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin:auto;background:%232A4365;display:block;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg transform='translate(25 50)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23EDF2F7' transform='scale(0.57841 0.57841)'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.3333333333333333s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/g%3E%3Cg transform='translate(50 50)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23EDF2F7' transform='scale(0.960498 0.960498)'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.16666666666666666s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/g%3E%3Cg transform='translate(75 50)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23EDF2F7' transform='scale(0.86427 0.86427)'%3E%3CanimateTransform attributeName='transform' type='scale' begin='0s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/g%3E%3C/svg%3E&quot;) center center no-repeat;transition: all 250ms ease 250ms;">
  13. <!-- background image partially urlencoded by "URL-encoder for SVG" -->
  14. </div>
  15. <noscript>
  16. <style>
  17. #page-preloader {
  18. display: none; /* in case we don't have JS */
  19. }
  20. </style>
  21. </noscript>
  22. <header class="w-full h-12 bg-blue-800 flex items-center justify-center">
  23. Header
  24. </header>
  25. <main class="max-w-screen-lg px-3 md:px-12 lg:px-32 flex-grow flex flex-col items-center justify-center">
  26. <h1 class="text-xl md:text-2xl lg:text-4xl my-3">Page content</h1>
  27. <img src="https://placeimg.com/640/480/any" alt="Random 640x480 image from placeimg.com" title="Random 640x480 image from placeimg.com" class="block w-full h-auto opacity-75 border-2 border-blue-200 p-1 rounded-full">
  28. <form action="" method="get" onsubmit="myButton.disabled=true">
  29. <button type="submit" name="myButton" class="my-3 px-5 py-3 text-8 md:text-10 lg:text-12 bg-blue-200 text-blue-800 rounded-lg" onclick="this.innerText='Reloading...';console.log('Button clicked')">Click me to reload page</button>
  30. </form>
  31. </main>
  32. <footer class="w-full h-12 bg-blue-800 flex items-center justify-center">
  33. Footer
  34. </footer>
  35. <script type="text/javascript">
  36. ; (function (document) {
  37. document.addEventListener("DOMContentLoaded", function (event) { // enough for modern browsers
  38. var page_preloader = document.getElementById('page-preloader');
  39. if (page_preloader) {
  40. page_preloader.style.opacity = 0;
  41. setTimeout(function () { // for animation
  42. if (page_preloader) page_preloader.remove();
  43. }, 1000);
  44. }
  45. });
  46. }(document));
  47. </script>
  48. </body>
  49. </html>