valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 01:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Loading indicator till app inits (#3788)

Browse Source
This commit is contained in:
Ran Byron 2019-05-13 12:11:22 -06:00 committed by GitHub
parent ad6f7109de
commit 95f11e6686
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/app/assets/less/main.less
View File

@ -75,6 +75,7 @@
@import 'redash/redash-table'; @import 'redash/redash-table';
@import 'redash/query'; @import 'redash/query';
@import 'redash/tags-control'; @import 'redash/tags-control';
@import 'redash/css-logo';

88
client/app/assets/less/redash/css-logo.less Normal file
View File

@ -0,0 +1,88 @@
// based on https://github.com/outbrain/tech-companies-logos-in-css/pull/28
@primary: #ff7964;
@shadow: #ef6c58;
@bar: white;
#css-logo {
width: 100px;
height: 100px;
position: relative;
#circle {
width: 79px;
height: 79px;
background-color: @shadow;
border-radius: 50%;
margin: auto;
overflow: hidden;
position: relative;
& > div {
width: 79px;
height: 73px;
background-color: @primary;
border-radius: 50%;
position: absolute;
top: 0;
}
}
#bars {
position: absolute;
left: 0;
top: 24px;
right: 0;
height: 33px;
display: flex;
padding: 0 22px 0;
.bar {
background: @bar;
box-shadow: 0px 2px 0 0 @shadow;
display: inline-block;
border-radius: 1px;
align-self: flex-end;
flex: 1;
margin: 0 2px;
border-radius: 3px;
&:nth-child(1) {
height: 32%;
}
&:nth-child(2) {
height: 71%;
}
&:nth-child(3) {
height: 50%;
}
&:nth-child(4) {
height: 100%;
}
}
}
#point,
#point > div {
position: absolute;
width: 0;
height: 0;
border: 17px solid @shadow;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: 0;
left: 48px;
transform: scaleX(0.87);
transform-origin: left;
}
#point > div {
bottom: -12px;
border-color: @primary;
transform: scaleX(1.04);
left: -17px;
}
}

52
client/app/assets/less/redash/redash-newstyle.less
View File

@ -940,4 +940,56 @@ text.slicetext {
.markdown img { .markdown img {
max-width: 100%; max-width: 100%;
}
.loading-indicator {
position: fixed;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px; // center
width: 100px;
height: 100px;
transition-duration: 150ms;
transition-timing-function: linear;
transition-property: opacity, transform;
#css-logo {
animation: hover 2s infinite;
}
#shadow {
width: 33px;
height: 12px;
border-radius: 50%;
background-color: black;
opacity: 0.25;
display: block;
position: absolute;
left: 34px;
top: 115px;
animation: shadow 2s infinite;
}
@keyframes hover {
50% {
transform: translateY(-5px);
}
}
@keyframes shadow {
50% {
transform: scaleX(0.9);
opacity: 0.2;
}
}
}
// hide indicator when app-view has content
app-view:not(:empty) ~ .loading-indicator {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
* {
animation: none !important;
}
} }

17
client/app/index.html
View File

@ -26,6 +26,23 @@
<body ng-class="bodyClass"> <body ng-class="bodyClass">
<section> <section>
<app-view></app-view> <app-view></app-view>
<div class="loading-indicator">
<div id="css-logo">
<div id="circle">
<div></div>
</div>
<div id="point">
<div></div>
</div>
<div id="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div id="shadow"></div>
</div>
</section> </section>
</body> </body>
</html> </html>

17
client/app/multi_org.html
View File

@ -26,6 +26,23 @@
<body ng-class="bodyClass"> <body ng-class="bodyClass">
<section> <section>
<app-view></app-view> <app-view></app-view>
<div class="loading-indicator">
<div id="css-logo">
<div id="circle">
<div></div>
</div>
<div id="point">
<div></div>
</div>
<div id="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div id="shadow"></div>
</div>
</section> </section>
</body> </body>
</html> </html>