htmx-ext-busy
Version:
An htmx extension that visualizes busy states in target areas during requests
28 lines (25 loc) • 820 B
HTML
<html>
<head>
<title>htmx-ext-busy example</title>
<link rel="stylesheet" href="busy.css" />
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script src="busy.js"></script>
</head>
<body hx-ext="hx-busy">
<main>
<h1 id="header">htmx-ext-busy</h1>
<p>
Open devtools, set network throttling, and press the button. It will
reload the header and the button itself, keeping this paragraph
untouched. You should see that they're busy while the request is in
flight.
</p>
<form hx-get="response.html" hx-swap="outerHTML" hx-busy="this, h1">
<input size="35" value="The whole form will be busy during request" />
<br />
<button>Load Content</button>
</form>
</main>
</body>
</html>