HTML Code
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>standby — JS loading pattern</title>

  <style>

    body {

      font-family: system-ui, sans-serif;

      margin: 0;

      padding: 1.5rem;

      background: #f8fafc;

      color: #334155;

      line-height: 1.7;

    }

    h1 { margin: 0 0 1rem; font-size: 1.25rem; color: #0f172a; }

    #loadingMessage {

      display: none;

      padding: 0.65rem 0.9rem;

      background: #fef3c7;

      border: 1px solid #fcd34d;

      border-radius: 6px;

      color: #92400e;

      font-size: 0.875rem;

      margin-bottom: 0.75rem;

      max-width: 320px;

    }

    object {

      width: 280px;

      height: 120px;

      border: 1px solid #cbd5e1;

      border-radius: 6px;

      display: block;

      background: #fff;

    }

    code { background: #e2e8f0; padding: 0.1rem 0.35rem; border-radius: 4px; }

  </style>

</head>

<body>

  <h1>JavaScript loading message</h1>

  <div id="loadingMessage" role="status" aria-live="polite">Loading content, please wait...</div>

  <object id="dynamicObject" data="" type="image/svg+xml">

    <p>Your browser does not support embedded objects.</p>

  </object>

  <script>

    document.addEventListener("DOMContentLoaded", function () {

      var loadingMessage = document.getElementById("loadingMessage");

      var dynamicObject = document.getElementById("dynamicObject");

      loadingMessage.style.display = "block";

      dynamicObject.data = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='120'%3E%3Crect fill='%23bbf7d0' width='280' height='120'/%3E%3Ctext x='140' y='68' text-anchor='middle' fill='%23166534' font-family='system-ui' font-size='14'%3ELoaded!%3C/text%3E%3C/svg%3E";

      dynamicObject.addEventListener("load", function () {

        loadingMessage.style.display = "none";

      });

    });

  </script>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML standby Attribute — Modern JavaScript Loading UI
