bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'loading-indicator' into 'develop'

Browse source 
Display loading indicator while JS is loading

See merge request soapbox-pub/soapbox-fe!764
This commit is contained in:
Alex Gleason 2021-09-16 22:14:20 +00:00
commit d63e1d1011
3 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/index.ejs
View file

@ -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
View file

@ -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
View file

@ -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;