Add a loading spinner

This commit is contained in:
Jake Howard 2022-08-01 22:23:06 +01:00
parent 5b4ff2b4e9
commit 7647ace4a0
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 42 additions and 11 deletions

View file

@ -0,0 +1,18 @@
@keyframes search-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body.page-searchpage {
.search-controls {
margin: 2rem auto;
max-width: 80%;
}
#search-indicator {
animation: search-loading 1.5s linear infinite;
}
}

View file

@ -13,6 +13,7 @@
@import "listing"; @import "listing";
@import "blocks"; @import "blocks";
@import "shareon"; @import "shareon";
@import "search";
html, html,
body { body {

View file

@ -10,17 +10,29 @@
</section> </section>
{% endif %} {% endif %}
<section class="container"> <section class="container search-controls">
<input <div class="field">
type="search" <p class="control has-icons-left has-icons-right">
name="q" <input
placeholder="Search" type="search"
hx-get="{{ search_url }}" class="input"
hx-trigger="keyup changed delay:300ms, search, revealed" name="q"
hx-target="#search-results" placeholder="Search"
autocomplete="off" hx-get="{{ search_url }}"
value="{{ search_query }}" hx-trigger="keyup changed delay:300ms, search{% if search_query %}, revealed{% endif %}"
> hx-target="#search-results"
autocomplete="off"
value="{{ search_query }}"
hx-indicator="#search-indicator"
>
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
<span class="icon is-small is-right htmx-indicator" id="search-indicator">
<i class="fas fa-circle-notch"></i>
</span>
</p>
</div>
</section> </section>
<section class="container" id="search-results"></section> <section class="container" id="search-results"></section>