diff --git a/static/css/style-loadingcircle.css b/static/css/style-loadingcircle.css new file mode 100644 index 0000000..ab8884f --- /dev/null +++ b/static/css/style-loadingcircle.css @@ -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); + } +} diff --git a/static/js/dynamicscrollingtext.js b/static/js/dynamicscrollingtext.js index 557fc34..36a5e8a 100644 --- a/static/js/dynamicscrollingtext.js +++ b/static/js/dynamicscrollingtext.js @@ -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) { diff --git a/templates/text.html b/templates/text.html index 2f5f2fb..cca6630 100755 --- a/templates/text.html +++ b/templates/text.html @@ -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 -->