UX: Splash screen v1 improvements (#17214)
This commit does six things * changes the animation for the splash screen. To a more subtle animation. * defers displaying the splash by 1.5 seconds * defers displaying the splash "loading" text by 2.5 seconds * defers removing the splash until all Discourse initializers have run * fixes a display issue in Firefox * Inlines the SVG as a base64 and inlines the required CSS. The encoded SVG is hard coded for now, but we will use a helper to generate that based on the file after some testing.
This commit is contained in:
Joe
GitHub
parent
a176b57be0
commit
293323af38
|
|
@ -52,9 +52,6 @@ const Discourse = Application.extend({
|
|||
start() {
|
||||
document.querySelector("noscript")?.remove();
|
||||
|
||||
// The app booted. Remove the splash screen
|
||||
document.querySelector("#d-splash")?.remove();
|
||||
|
||||
if (Error.stackTraceLimit) {
|
||||
// We need Errors to have full stack traces for `lib/source-identifier`
|
||||
Error.stackTraceLimit = Infinity;
|
||||
|
|
@ -84,6 +81,9 @@ const Discourse = Application.extend({
|
|||
initialize: () => withPluginApi(cb.version, cb.code),
|
||||
});
|
||||
});
|
||||
|
||||
// The app booted. Remove the splash screen
|
||||
document.querySelector("#d-splash")?.remove();
|
||||
},
|
||||
|
||||
_registerPluginCode(version, code) {
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
html {
|
||||
background: var(--secondary);
|
||||
// needed because this sheet loads early and we want no scroll bars until
|
||||
// the splash is removed.
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
#d-splash {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.preloader-image {
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.preloader-text {
|
||||
padding-top: 5em;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-items: center;
|
||||
|
||||
&:after {
|
||||
animation: loading-text 3s infinite;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5em;
|
||||
margin: 0 0.1em;
|
||||
left: 100%;
|
||||
// TODO: this needs R2 RTL magic
|
||||
.rtl & {
|
||||
left: 0;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-text {
|
||||
0% {
|
||||
content: "";
|
||||
}
|
||||
|
||||
25% {
|
||||
content: ".";
|
||||
}
|
||||
|
||||
50% {
|
||||
content: "..";
|
||||
}
|
||||
|
||||
75% {
|
||||
content: "...";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,83 @@
|
|||
<%- unless customization_disabled? %>
|
||||
<section id="d-splash">
|
||||
<%= discourse_stylesheet_link_tag 'd_splash', theme_id: nil %>
|
||||
<section id="d-splash">
|
||||
<style>
|
||||
html {
|
||||
background: var(--secondary);
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
<img
|
||||
class="preloader-image"
|
||||
src="/images/preloader.svg"
|
||||
alt="<%=SiteSetting.title%>"
|
||||
>
|
||||
#d-splash {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
<div class="preloader-text">
|
||||
<span>
|
||||
<%= I18n.t("js.preloader_text") %>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
#d-splash .preloader-image {
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#d-splash .preloader-text {
|
||||
padding-top: 4em;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
place-items: center;
|
||||
opacity: 0;
|
||||
animation: fade-in 0.5s ease-in-out;
|
||||
animation-delay: 2.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
#d-splash .preloader-text:after {
|
||||
animation: loading-text 3s infinite;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
margin: 0 0.1em;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.rtl #d-splash .preloader-text:after {
|
||||
left: 0;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-text {
|
||||
0% {
|
||||
content: "";
|
||||
}
|
||||
25% {
|
||||
content: ".";
|
||||
}
|
||||
50% {
|
||||
content: "..";
|
||||
}
|
||||
75% {
|
||||
content: "...";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<img
|
||||
class="preloader-image"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' data-ember-extension='1'%0A%3E%3Cstyle%3E :root %7B /* these need to be injected dynamicly to match theme colors */ --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 1.5s; stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); animation-delay: 1s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 1.1s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 1.2s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 1.3s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 1.4s; %7D @keyframes loader %7B 15%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 95%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
|
||||
alt="<%=SiteSetting.title%>"
|
||||
/>
|
||||
|
||||
<div class="preloader-text">
|
||||
<span> <%= I18n.t("js.preloader_text") %> </span>
|
||||
</div>
|
||||
</section>
|
||||
<%- end %>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,6 @@
|
|||
<%= render partial: "layouts/head" %>
|
||||
<%= discourse_csrf_tags %>
|
||||
|
||||
<%- if include_splash_screen? %>
|
||||
<link rel="preload" as="image" href="/images/preloader.svg">
|
||||
<%- end %>
|
||||
|
||||
<%- if SiteSetting.enable_escaped_fragments? %>
|
||||
<meta name="fragment" content="!">
|
||||
<%- end %>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<svg
|
||||
version="1.1"
|
||||
height="2000"
|
||||
width="2000"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
data-ember-extension="1"
|
||||
>
|
||||
<style>
|
||||
:root {
|
||||
|
|
@ -22,19 +21,23 @@
|
|||
animation-timing-function: ease-in-out;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1.5s;
|
||||
stroke: #fff;
|
||||
stroke-width: 0.5px;
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
r: max(1vw, 11px);
|
||||
cy: 50%;
|
||||
}
|
||||
|
||||
.dots:first-child {
|
||||
fill: var(--tertiary);
|
||||
animation-delay: 1.4s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.dots:nth-child(2) {
|
||||
fill: var(--tertiary);
|
||||
animation-delay: 1.3s;
|
||||
opacity: 0.6;
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
|
||||
.dots:nth-child(3) {
|
||||
|
|
@ -44,42 +47,42 @@
|
|||
|
||||
.dots:nth-child(4) {
|
||||
fill: var(--quaternary);
|
||||
animation-delay: 1.1s;
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
|
||||
.dots:nth-child(5) {
|
||||
fill: var(--quaternary);
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.container {
|
||||
transform: translateX(-125px);
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
15% {
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translatex(calc(250px));
|
||||
opacity: 1;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: translatex(calc(250px));
|
||||
opacity: 1;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
95% {
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<g class="container">
|
||||
<circle class="dots" cy="50%" r="10" cx="50vw"></circle>
|
||||
<circle class="dots" cy="50%" r="10" cx="50vw"></circle>
|
||||
<circle class="dots" cy="50%" r="10" cx="50vw"></circle>
|
||||
<circle class="dots" cy="50%" r="10" cx="50vw"></circle>
|
||||
<circle class="dots" cy="50%" r="10" cx="50vw"></circle>
|
||||
<circle class="dots" cx="30vw" />
|
||||
<circle class="dots" cx="40vw" />
|
||||
<circle class="dots" cx="50vw" />
|
||||
<circle class="dots" cx="60vw" />
|
||||
<circle class="dots" cx="70vw" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in New Issue