mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Styling of loading screen.
This commit is contained in:
parent
4700fa16d3
commit
7a1c06982e
2 changed files with 76 additions and 24 deletions
|
@ -7,12 +7,17 @@ block vars
|
|||
|
||||
block content
|
||||
.editor(ng-controller="IdeController").full-size
|
||||
.loading-screen(ng-show="state.loading")
|
||||
.container
|
||||
h3 #{translate("loading")}...
|
||||
.progress
|
||||
.progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}")
|
||||
p.text-center.text-danger(ng-if="state.error").ng-cloak
|
||||
.loading-screen(ng-if="state.loading")
|
||||
.loading-screen-lion-container
|
||||
.loading-screen-lion(
|
||||
style="height: 20%;"
|
||||
ng-style="{ 'height': state.load_progress + '%' }"
|
||||
)
|
||||
h3.loading-screen-label(ng-if="!state.error") #{translate("loading")}
|
||||
span.loading-screen-ellip .
|
||||
span.loading-screen-ellip .
|
||||
span.loading-screen-ellip .
|
||||
p.loading-screen-error(ng-if="state.error").ng-cloak
|
||||
span(ng-bind-html="state.error")
|
||||
|
||||
include ./editor/feature-onboarding
|
||||
|
|
|
@ -14,6 +14,18 @@
|
|||
@import "./editor/review-panel.less";
|
||||
@import "./editor/feature-onboarding.less";
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.full-size {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -53,24 +65,59 @@
|
|||
}
|
||||
|
||||
.loading-screen {
|
||||
h3 {
|
||||
padding-top: 136px;
|
||||
background-image: url(/img/lion-128.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
}
|
||||
.full-size;
|
||||
background-color: #fafafa;
|
||||
.container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
margin-left: -200px;
|
||||
margin-top: -200px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.loading-screen-lion-container {
|
||||
width: 15%;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.loading-screen-lion {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 86.2%;
|
||||
height: 0;
|
||||
background: url(/img/brand/lion-grey.svg) no-repeat bottom / 100%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url(/img/brand/lion.svg) no-repeat bottom / 100%;
|
||||
transition: height .5s;
|
||||
}
|
||||
}
|
||||
.loading-screen-label {
|
||||
margin: 0;
|
||||
padding-top: 1em;
|
||||
font-size: 2em;
|
||||
color: @gray-dark;
|
||||
}
|
||||
.loading-screen-ellip {
|
||||
animation: blink 1.4s both infinite;
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-screen-error {
|
||||
margin: 0;
|
||||
padding-top: 1em;
|
||||
color: @state-danger-text;
|
||||
}
|
||||
|
||||
|
||||
.loading-panel {
|
||||
.full-size;
|
||||
|
|
Loading…
Reference in a new issue