mirror of
https://github.com/discourse/discourse.git
synced 2025-02-15 09:03:05 +08:00
293323af38
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.
89 lines
1.8 KiB
XML
89 lines
1.8 KiB
XML
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
version="1.1"
|
|
data-ember-extension="1"
|
|
>
|
|
<style>
|
|
:root {
|
|
/* these need to be injected dynamicly to match theme colors */
|
|
--primary: #222222;
|
|
--secondary: #ffffff;
|
|
--tertiary: #f15c21;
|
|
--highlight: #f0ea88;
|
|
--quaternary: #65ccff;
|
|
--success: #009900;
|
|
}
|
|
|
|
/* these styles need to live here because the SVG has a different scope */
|
|
.dots {
|
|
animation-name: loader;
|
|
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: 1s;
|
|
}
|
|
|
|
.dots:nth-child(2) {
|
|
fill: var(--tertiary);
|
|
animation-delay: 1.1s;
|
|
}
|
|
|
|
.dots:nth-child(3) {
|
|
fill: var(--highlight);
|
|
animation-delay: 1.2s;
|
|
}
|
|
|
|
.dots:nth-child(4) {
|
|
fill: var(--quaternary);
|
|
animation-delay: 1.3s;
|
|
}
|
|
|
|
.dots:nth-child(5) {
|
|
fill: var(--quaternary);
|
|
animation-delay: 1.4s;
|
|
}
|
|
|
|
@keyframes loader {
|
|
15% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
|
|
45% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
|
|
65% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
|
|
95% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</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" />
|
|
</g>
|
|
</svg>
|