- <!DOCTYPE html>
- <html>
- <head>
- <title>Page Loader</title>
- <style>
- body {
- background-color: #f1f1f1;
- font-family: Arial, sans-serif;
- text-align: center;
- }
- .loader {
- display: inline-block;
- border: 4px solid #ccc;
- border-top: 4px solid #3498db;
- border-radius: 50%;
- width: 50px;
- height: 50px;
- animation: spin 2s linear infinite;
- margin-bottom: 20px;
- }
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- .welcome-message {
- font-size: 24px;
- color: #333;
- }
- </style>
- </head>
- <body>
- <div class="loader"></div>
- <div class="welcome-message">Welcome, <span id="name-placeholder"></span>!</div>
- <script>
- // Replace "Your Name" with the desired name
- const name = "Your Name";
- // Set the name in the placeholder after a 2-second delay
- setTimeout(function() {
- document.getElementById("name-placeholder").textContent = name;
- }, 2000);
- </script>
- </body>
- </html>
[text] Aarrrr
Viewer
Editor
You can edit this paste and save as new: