[text] Aarrrr

Viewer

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Page Loader</title>
  5.   <style>
  6.     body {
  7.       background-color: #f1f1f1;
  8.       font-family: Arial, sans-serif;
  9.       text-align: center;
  10.     }
  11.     
  12.     .loader {
  13.       display: inline-block;
  14.       border: 4px solid #ccc;
  15.       border-top: 4px solid #3498db;
  16.       border-radius: 50%;
  17.       width: 50px;
  18.       height: 50px;
  19.       animation: spin 2s linear infinite;
  20.       margin-bottom: 20px;
  21.     }
  22.     
  23.     @keyframes spin {
  24.       0% {
  25.         transform: rotate(0deg);
  26.       }
  27.       100% {
  28.         transform: rotate(360deg);
  29.       }
  30.     }
  31.     
  32.     .welcome-message {
  33.       font-size: 24px;
  34.       color: #333;
  35.     }
  36.   </style>
  37. </head>
  38. <body>
  39.   <div class="loader"></div>
  40.   <div class="welcome-message">Welcome, <span id="name-placeholder"></span>!</div>
  41.  
  42.   <script>
  43.     // Replace "Your Name" with the desired name
  44.     const name = "Your Name";
  45.  
  46.     // Set the name in the placeholder after a 2-second delay
  47.     setTimeout(function() {
  48.       document.getElementById("name-placeholder").textContent = name;
  49.     }, 2000);
  50.   </script>
  51. </body>
  52. </html>
  53.  

Editor

You can edit this paste and save as new:


File Description
  • Aarrrr
  • Paste Code
  • 06 Jun-2023
  • 1.11 Kb
You can Share it: