mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04: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
|
block content
|
||||||
.editor(ng-controller="IdeController").full-size
|
.editor(ng-controller="IdeController").full-size
|
||||||
.loading-screen(ng-show="state.loading")
|
.loading-screen(ng-if="state.loading")
|
||||||
.container
|
.loading-screen-lion-container
|
||||||
h3 #{translate("loading")}...
|
.loading-screen-lion(
|
||||||
.progress
|
style="height: 20%;"
|
||||||
.progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}")
|
ng-style="{ 'height': state.load_progress + '%' }"
|
||||||
p.text-center.text-danger(ng-if="state.error").ng-cloak
|
)
|
||||||
|
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")
|
span(ng-bind-html="state.error")
|
||||||
|
|
||||||
include ./editor/feature-onboarding
|
include ./editor/feature-onboarding
|
||||||
|
|
|
@ -14,6 +14,18 @@
|
||||||
@import "./editor/review-panel.less";
|
@import "./editor/review-panel.less";
|
||||||
@import "./editor/feature-onboarding.less";
|
@import "./editor/feature-onboarding.less";
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.full-size {
|
.full-size {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -53,24 +65,59 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-screen {
|
.loading-screen {
|
||||||
h3 {
|
display: flex;
|
||||||
padding-top: 136px;
|
flex-direction: column;
|
||||||
background-image: url(/img/lion-128.png);
|
justify-content: center;
|
||||||
background-repeat: no-repeat;
|
align-items: center;
|
||||||
background-position: top center;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
.full-size;
|
background-color: #FFF;
|
||||||
background-color: #fafafa;
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 400px;
|
|
||||||
margin-left: -200px;
|
|
||||||
margin-top: -200px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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 {
|
.loading-panel {
|
||||||
.full-size;
|
.full-size;
|
||||||
|
|
Loading…
Reference in a new issue