github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 11:23:25 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Reduces splash animation delay (#17282)

Browse Source 
This PR cuts down the delay before the splash screen is visible.
This commit is contained in:
Joe 2022-06-30 17:19:39 +08:00 committed by GitHub
parent 3a6e87ca4f
commit c86c709998
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/views/common/_discourse_splash.html.erb
View File

@ -28,7 +28,7 @@
position: absolute;
opacity: 0;
animation: fade-in 0.5s ease-in-out;
animation-delay: 2.5s;
animation-delay: 1.25s;
animation-fill-mode: forwards;
color: var(--primary);
}
@ -37,10 +37,13 @@
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%;
}
@ -71,7 +74,7 @@
<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'%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --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: 1.25s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 1.35s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 1.45s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 1.55s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 1.65s; %7D @keyframes loader %7B 0%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 100%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"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --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; 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: 0.625s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.675s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.725s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.775s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.825s; %7D @keyframes loader %7B 0%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 100%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%>"
/>

28
public/images/preloader.svg
View File

@ -1,6 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" data-ember-extension="1">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
>
<style>
/* these need to be injected dynamicly to match theme colors */
:root {
--primary: #222222;
@ -17,7 +20,6 @@
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;
@ -28,27 +30,27 @@
.dots:first-child {
fill: var(--tertiary);
animation-delay: 1.25s;
animation-delay: 0.625s;
}
.dots:nth-child(2) {
fill: var(--tertiary);
animation-delay: 1.35s;
animation-delay: 0.675s;
}
.dots:nth-child(3) {
fill: var(--highlight);
animation-delay: 1.45s;
animation-delay: 0.725s;
}
.dots:nth-child(4) {
fill: var(--quaternary);
animation-delay: 1.55s;
animation-delay: 0.775s;
}
.dots:nth-child(5) {
fill: var(--quaternary);
animation-delay: 1.65s;
animation-delay: 0.825s;
}
@keyframes loader {
@ -72,10 +74,10 @@
</style>
<g class="container">
<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"/>
<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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB