miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Display loading indicator while JS is loading

v1.x.x
Alex Gleason 2021-09-16 17:09:43 -05:00
rodzic b5c24adb59
commit 501497b36f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 13 dodań i 3 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
app/index.ejs
Wyświetl plik

@ -8,8 +8,12 @@
<!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png">
</head>
<body class="app-body">
<body class="app-body app-body--loading theme-mode-light no-reduce-motion">
<div class="app-holder" id="soapbox">
<div class="loading-indicator">
<div class="loading-indicator__figure"></div>
</div>
</div>
<noscript>To use Soapbox, please enable JavaScript.</noscript>
<div class="app-holder" id="soapbox"></div>
</body>
</html>

1
app/styles/basics.scss
Wyświetl plik

@ -43,6 +43,7 @@ body {
&.app-body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
overflow: hidden;
overflow-y: scroll;

7
app/styles/loading.scss
Wyświetl plik

@ -27,7 +27,8 @@
height: 42px;
box-sizing: border-box;
background-color: transparent;
border: 0 solid hsla(var(--brand-color_hsl), 0.5);
border: 0 solid;
border-color: hsla(var(--brand-color_hsl), 0.5);
border-width: 6px;
border-radius: 50%;
}
@ -40,6 +41,10 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app-body--loading .loading-indicator__figure {
border-color: #ddd;
}
@keyframes loader-figure {
0% {
width: 0;