feat: implement a simple loader

Play with htmx events
2023-05-11 00:03:36 +02:00
parent 4489a8a8e5
commit efef1d074e
4 changed files with 209 additions and 4 deletions
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -7,15 +7,34 @@
        <link rel="stylesheet" href="/static/css/style.css" />

        <script src="/static/js/htmx.min.js"></script>
-        <script src="/static/js/script.js"></script>
+        <script src="/static/js/script.js" defer></script>
+        <script src="/static/js/loader.js" defer></script>

        <title>{% block title %}Hello htmx!{% endblock %}</title>

        {% block head %}{% endblock %}
    </head>
    <body>
+        <div data-loader hidden></div>
+        <nav data-nav>
+            <hgroup>
+                <h2>htmx</h2>
+                <p>Very cool</p>
+            </hgroup>
+            <ol>
+                <li><a href="/">Home</a></li>
+                <li><a href="/user">User</a></li>
+            </ol>
+        </nav>
+        <header>
+            <div>Item 1</div>
+            <div>Item 2</div>
+            <div>Item 3</div>
+        </header>
        <main id="content">
            {% block content %}{% endblock %}
        </main>
-    </body>
+        <footer>
+            <small>* Not a pretty site...</small>
+        </footer>
 </html>