Skip to content
Snippets Groups Projects
Commit 5875faa6 authored by Julian's avatar Julian
Browse files

Replace spinning loader with splashscreen

parent b45b716e
No related branches found
No related tags found
1 merge request!1123Resolve "Finalise Vuetify app as SPA"
Hide whitespace changes
Inline Side-by-side
aleksis/core/templates/core/partials/pure_css_loader.html deleted 100644 → 0
+ 0
− 60
View file @ b45b716e
{# Loader by https://loading.io/css/ under CC0 licence #}
<style>
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 4px solid{{ request.site.preferences.theme__primary }};
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: {{ request.site.preferences.theme__primary }} transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="wrapper">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
aleksis/core/templates/core/partials/splash_screen.html 0 → 100644
+ 115
− 0
View file @ 5875faa6
{% load static any_js i18n %}
{% include_css "Roboto300" %}
{% static "img/aleksis-banner.svg" as aleksis_banner %}
<div id="logo-container">
<img
src="{% firstof request.site.preferences.theme__logo.url aleksis_banner %}"
alt="{{ request.site.preferences.general__title }} – Logo"
id="logo"
width="600"
>
<div id="text">
<h1>{{ request.site.preferences.general__title }}</h1>
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<noscript>
{% blocktrans %}
This webbrowser doesn't support JavaScript, or it's execution is blocked. Please use another browser to continue.
{% endblocktrans %}
</noscript>
</div>
<style>
#logo {
width: 100%;
}
#logo-container {
width: min(80vw, 600px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#text {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
h1 {
font-family: Roboto, sans-serif;
font-weight: 300;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: {{ request.site.preferences.theme__primary }};
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
</style>
aleksis/core/templates/core/vue_index.html
+ 1
− 1
View file @ 5875faa6
......@@ -22,7 +22,7 @@
<body>
<main id="app">
<!-- HTML and CSS in #app will be replaced by vue -->
{% include "core/partials/pure_css_loader.html" %}
{% include "core/partials/splash_screen.html" %}
<app ref="aleksisApp"></app>
</main>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment