This commit is contained in:
parent
81fb811111
commit
00bbb5c015
3 changed files with 37 additions and 47 deletions
31
static/css/style-loadingcircle.css
Normal file
31
static/css/style-loadingcircle.css
Normal file
|
@ -0,0 +1,31 @@
|
|||
.favicon-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.favicon-wrapper.loading img {
|
||||
visibility: hidden; /* hide placeholder */
|
||||
}
|
||||
|
||||
.favicon-wrapper.loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: -8px 0 0 -8px;
|
||||
border: 2px solid var(--html-bg);
|
||||
border-top-color: var(--fg);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
|
@ -5,8 +5,8 @@
|
|||
const hardCacheEnabled = templateData.getAttribute('data-hard-cache-enabled') === 'true';
|
||||
|
||||
// Track all favicon/image elements and their IDs
|
||||
const allMediaElements = [];
|
||||
const allMediaIds = [];
|
||||
let allMediaElements = [];
|
||||
let allMediaIds = [];
|
||||
let statusCheckTimeout = null;
|
||||
|
||||
// Add loading effects to image/favicon and associated text
|
||||
|
@ -93,11 +93,9 @@
|
|||
addLoadingEffects(imgElement);
|
||||
|
||||
|
||||
if (hardCacheEnabled) {
|
||||
imgElement.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
|
||||
} else {
|
||||
imgElement.src = '/static/images/placeholder.svg';
|
||||
}
|
||||
if (!hardCacheEnabled) {
|
||||
imgElement.src = ''; // don't show anything until actual URL arrives
|
||||
}
|
||||
|
||||
// Schedule a status check if not already pending
|
||||
if (!statusCheckTimeout) {
|
||||
|
|
|
@ -10,52 +10,13 @@
|
|||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
|
||||
<link rel="stylesheet" href="/static/css/style-fonts.css">
|
||||
<link rel="stylesheet" href="/static/css/style-loadingindicator.css">
|
||||
<link rel="stylesheet" href="/static/css/style-loadingcircle.css">
|
||||
<link rel="stylesheet" href="/static/css/style-menu.css">
|
||||
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
|
||||
<!-- Icons -->
|
||||
<link rel="icon" href="{{ .IconPathSVG }}" type="image/svg+xml">
|
||||
<link rel="icon" href="{{ .IconPathPNG }}" type="image/png">
|
||||
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
|
||||
<style>
|
||||
.favicon-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.favicon-wrapper.loading img {
|
||||
visibility: hidden; /* hide placeholder */
|
||||
}
|
||||
|
||||
.favicon-wrapper.loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: -8px 0 0 -8px;
|
||||
border: 2px solid var(--html-bg);
|
||||
border-top-color: var(--fg);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@keyframes loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Menu Button -->
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue