Merge branch 'loading-indicator' into 'develop'

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

View file

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

View file

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

View file

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