ASCII loading spinners and progress bars for websites

<div id="ascii-loader" role="status" style="position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:16px;background:#09090b;color:#e4e4e7;transition:opacity .3s">
  <ascii-art piece="progress-loader" size="8"></ascii-art>
  <p style="margin:0;font:14px system-ui">Loading…</p>
</div>
<script>
  var t0 = Date.now();
  addEventListener("load", function () {
    setTimeout(function () {
      var el = document.getElementById("ascii-loader");
      el.style.opacity = 0; setTimeout(function () { el.remove(); }, 300);
    }, Math.max(0, 400 - (Date.now() - t0)));
  });
</script>
<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>

<button id="save"><span class="label">Save</span></button>
<style>
  .busy .label::after { content: "⠋"; margin-left: 8px; animation: spin .8s steps(1) infinite; }
  @keyframes spin { 0%{content:"⠋"} 20%{content:"⠹"} 40%{content:"⠼"} 60%{content:"⠦"} 80%{content:"⠇"} }
</style>
<script>
  save.onclick = async () => {
    save.classList.add("busy"); save.disabled = true;
    await fetch("/api/save", { method: "POST" });
    save.classList.remove("busy"); save.disabled = false;
  };
</script>

import { lazy, Suspense } from "react";
import { AsciiLoader } from "./AsciiLoader";

const Dashboard = lazy(() => import("./Dashboard"));

export default function App() {
  return (
    <Suspense fallback={<AsciiLoader text="Loading your dashboard…" />}>
      <Dashboard />
    </Suspense>
  );
}

<div style="display:grid;place-items:center;padding:40px">
  <ascii-art piece="skeleton-loader" size="7"></ascii-art>
</div>
<script type="module" src="https://www.ascii-magic.com/ascii/ascii.js"></script>

function showLoaderIfSlow(promise, el, delay = 300) {
  const timer = setTimeout(() => (el.hidden = false), delay);
  return promise.finally(() => { clearTimeout(timer); el.hidden = true; });
}

// showLoaderIfSlow(fetch("/api/data"), document.getElementById("ascii-loader"));