Show loading indicator

This commit is contained in:
Mark Veidemanis 2022-08-03 07:20:30 +01:00
parent e3476f5298
commit 990a88a340
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 13 additions and 1 deletions

View File

@ -51,6 +51,16 @@
.slider-output { .slider-output {
width: 4rem !important; width: 4rem !important;
} }
.htmx-indicator{
opacity:0;
transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
opacity:1
}
.htmx-request.htmx-indicator{
opacity:1
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -6,7 +6,8 @@
<form method="POST" hx-post="{% url 'search_drilldown' %}" <form method="POST" hx-post="{% url 'search_drilldown' %}"
hx-trigger="change" hx-trigger="change"
hx-target="#results" hx-target="#results"
hx-swap="innerHTML"> hx-swap="innerHTML"
hx-indicator="#spinner">
{% csrf_token %} {% csrf_token %}
<div class="columns"> <div class="columns">
@ -42,6 +43,7 @@
class="button is-light has-text-link is-right"> class="button is-light has-text-link is-right">
Options Options
</div> </div>
<span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
</div> </div>
</div> </div>