diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 5dc40315..7c233360 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -732,6 +732,7 @@ font-size: 12px; color: #000000; text-decoration: none; + display: inline-block; } #bottom-right a:hover { opacity: 1; @@ -742,4 +743,23 @@ #bottom-right:hover svg { fill: #000000; } + + #issues-container::after { + content: ""; + display: block; + width: 40px; + height: 40px; + margin: 20px auto; + border: 4px solid #00000040; + border-top: 4px solid #000000; + border-radius: 50%; + animation: spin 1s linear infinite; + } + #issues-container.ready::after { + display: none; + } + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } } diff --git a/static/style/style.css b/static/style/style.css index 63630a79..7173682d 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -743,4 +743,28 @@ #bottom-right:hover svg { fill: #ffffff; } + + #issues-container::after { + content: ""; + display: block; + width: 48px; + height: 48px; + border: 4px solid #ffffff40; + border-top: 4px solid #ffffff; + border-radius: 50%; + animation: spin 1s linear infinite; + top: calc(50vh - 48px); + position: fixed; + } + #issues-container.ready::after { + display: none; + } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } }