Add loading indicator for admin theme (#25)
This commit is contained in:
parent
b1ca48c2c5
commit
a8386d6c97
@ -51,6 +51,7 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main class="mx-3 mt-3">
|
||||
<div class="load-overlay p-5" id="loadOverlay"><h1 class="p-3">Loading…</h1></div>
|
||||
<div class="messages mt-2" id="msgContainer">
|
||||
{% for msg in messages %}
|
||||
<div role="alert" class="alert alert-{{ msg.level }} alert-dismissible fade show">
|
||||
|
@ -8,7 +8,7 @@
|
||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="{{ "themes/admin/admin.css" | relative_link }}">
|
||||
</head>
|
||||
<body hx-boost="true">
|
||||
<body hx-boost="true" hx-indicator="#loadOverlay">
|
||||
{% include_template "_layout" %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
|
@ -92,3 +92,25 @@ a.text-danger:link:hover, a.text-danger:visited:hover {
|
||||
border-radius: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
.load-overlay {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
color: white;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
top: 55px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: ease-in-out .5s;
|
||||
}
|
||||
.load-overlay h1 {
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
height: fit-content;
|
||||
border: solid 6px white;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
.load-overlay.htmx-request {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user