Add loading indicator
This commit is contained in:
parent
244edf90ac
commit
1eb58f87d2
@ -129,6 +129,20 @@
|
|||||||
.logout-btn:hover {
|
.logout-btn:hover {
|
||||||
background: #2a3040;
|
background: #2a3040;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 1rem auto;
|
||||||
|
border: 3px solid #1e2433;
|
||||||
|
border-top-color: #4ade80;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -145,7 +159,7 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<% if authenticated %>
|
<% if authenticated %>
|
||||||
<div id="content"></div>
|
<div id="content"><div class="spinner"></div></div>
|
||||||
<script>
|
<script>
|
||||||
fetch("?content", { credentials: "same-origin" })
|
fetch("?content", { credentials: "same-origin" })
|
||||||
.then(function(response) {
|
.then(function(response) {
|
||||||
|
|||||||
@ -81,6 +81,7 @@ end
|
|||||||
|
|
||||||
if cgi.params.key?("content")
|
if cgi.params.key?("content")
|
||||||
if authenticated
|
if authenticated
|
||||||
|
sleep 5
|
||||||
cgi.out("type" => "text/html", "charset" => "UTF-8") do
|
cgi.out("type" => "text/html", "charset" => "UTF-8") do
|
||||||
"<p>Content placeholder</p>"
|
"<p>Content placeholder</p>"
|
||||||
end
|
end
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user