Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Add spinning animation for pre-CSS app loading page. 

Fixes #22265.
This commit is contained in:
brijsiyag 2023-01-24 14:13:10 +05:30 committed by Tim Abbott
parent 994806c505
commit cb35e5c6fc
1 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
templates/zerver/app/index.html
View File

@ -29,11 +29,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 10px; padding: 10px;
} }
#app-loading-logo {
width: 96px;
height: 96px;
margin: 0 auto 24px;
}
#app-loading-middle-content h3 { #app-loading-middle-content h3 {
text-align: center; text-align: center;
} }
@ -59,6 +54,34 @@
background-color: hsl(212, 28%, 18%); background-color: hsl(212, 28%, 18%);
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
} }
.app-loading-spinner-container {
position: relative;
margin: auto;
display: flex;
justify-content: center;
}
.app-loading-logo {
height: 64px;
padding: 10px;
}
@keyframes zspinner {
to {transform: rotate(360deg);}
}
.app-loading-spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
width: 84px;
height: 84px;
border-radius: 50%;
border: 4px solid hsl(0,0%,94%);
border-top-color: hsl(0,0%,52%);
animation: zspinner 1s linear infinite;
}
.app-loading-text {
font-weight: normal;
}
</style> </style>
{% endblock %} {% endblock %}
@ -68,10 +91,11 @@
<div id="app-loading"> <div id="app-loading">
<div id="app-loading-middle-content"> <div id="app-loading-middle-content">
<div id="app-loading-logo"> <div class="app-loading-spinner-container">
<img src="/static/images/logo/zulip-icon-circle.svg" /> <div class="app-loading-spinner"></div>
<img class="app-loading-logo" src="https://chat.zulip.org/static/images/logo/zulip-icon-circle.svg"/>
</div> </div>
<h3>{{ _('Loading...') }}</h3> <h3 class="app-loading-text">{{ _('Loading...') }}</h3>
</div> </div>
<div id="app-loading-bottom-content"> <div id="app-loading-bottom-content">
<p>{% trans %}If this message does not go away, try <a id="reload-lnk">reloading</a> the page.{% endtrans %}</p> <p>{% trans %}If this message does not go away, try <a id="reload-lnk">reloading</a> the page.{% endtrans %}</p>