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--> <!--server-generated-meta-->
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
</head> </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> <noscript>To use Soapbox, please enable JavaScript.</noscript>
<div class="app-holder" id="soapbox"></div>
</body> </body>
</html> </html>

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

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

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

@ -27,7 +27,8 @@
height: 42px; height: 42px;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; 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-width: 6px;
border-radius: 50%; border-radius: 50%;
} }
@ -40,6 +41,10 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); 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 { @keyframes loader-figure {
0% { 0% {
width: 0; width: 0;