New loading animation
ci/woodpecker/push/ociImagePush Pipeline is pending
Details
ci/woodpecker/push/ociImagePush Pipeline is pending
Details
This commit is contained in:
parent
d6091bffee
commit
815d4da423
GPG Key ID:
BF6CB659ADEE60EC
|
|
@ -32,9 +32,6 @@ html {
|
|||
width: 64px;
|
||||
height: 64px;
|
||||
pointer-events: none;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: tada;
|
||||
}
|
||||
|
||||
#splashSpinner {
|
||||
|
|
@ -44,13 +41,28 @@ html {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
transform: translateY(110px);
|
||||
display: none;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#splashText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
height: 0;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#splashSpinner > .spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -79,34 +91,6 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media(prefers-reduced-motion) {
|
||||
#splashSpinner {
|
||||
display: block;
|
||||
|
|
@ -117,17 +101,99 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
#splashText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
height: 0;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
font-family: sans-serif;
|
||||
.loadButterfly {
|
||||
position: absolute;
|
||||
top: -68px;
|
||||
right: 32px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.loadButterfly .loadButterflyWingLeft {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
--butterfly-wl-0: rgb(255, 185, 158);
|
||||
--butterfly-wl-1: rgb(118, 70, 255);
|
||||
animation-name: anim-lw;
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.loadButterfly .loadButterflyWingLeft {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes anim-lw {
|
||||
0% {
|
||||
transform: rotate3d(1, 1, 0, 1deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate3d(1, 1, 0, 45deg);
|
||||
filter: brightness(1.25);
|
||||
}
|
||||
|
||||
40% {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate3d(1, 1, 0, 1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate3d(1, 1, 0, 1deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loadButterfly .loadButterflyWingRight {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
--butterfly-wr-0: rgb(255, 185, 158);
|
||||
--butterfly-wr-1: rgb(118, 70, 255);
|
||||
animation-name: anim-rw;
|
||||
animation-duration: 3s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.loadButterfly .loadButterflyWingRight {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-rw {
|
||||
0% {
|
||||
transform: rotate3d(1, 1, 0, -1deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate3d(1, 1, 0, -45deg);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
40% {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate3d(1, 1, 0, -1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate3d(1, 1, 0, -1deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
<script>
|
||||
var VERSION = "{{ version }}";
|
||||
var CLIENT_ENTRY = "{{ client_entry.file }}";
|
||||
var LANGS = ["en-US"];
|
||||
var _HOST = "{{ instance_host }}";
|
||||
|
||||
{% if base_url %}
|
||||
|
|
@ -57,6 +56,81 @@
|
|||
<noscript>
|
||||
Please turn on JavaScript to run {{ title | capitalize }}.
|
||||
</noscript>
|
||||
<div id="splash">
|
||||
<div id="splashIcon">
|
||||
{% if splash_icon %}
|
||||
<img id="splashIcon" src="{{ splashIcon }}" alt="{{ instance_name }} splash icon">
|
||||
{% else %}
|
||||
<div class="loadButterfly">
|
||||
<svg
|
||||
class="loadButterflyWingLeft"
|
||||
width="128"
|
||||
height="128"
|
||||
version="1.1"
|
||||
viewBox="0 0 132.29 132.29"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="left-wing-gradient"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
y1="132.29"
|
||||
x2="132.29"
|
||||
y2="0">
|
||||
<stop offset="0%" stop-color="var(--butterfly-wl-0)"/>
|
||||
<stop offset="100%" stop-color="var(--butterfly-wl-1)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="m69.68 67.053-16.078-1.6896-29.054 6.7403-15.672 10.996-0.12846 11.477 11.469 7.3293 20.661 9.219 10.9-7.602 0.0656 8.203 10.532 7.894 19.116 2.389 16.046-8.952-2.2676-13.201-7.7352-12.772-0.134-0.1705z"
|
||||
fill="url(#left-wing-gradient)"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="loadButterflyWingRight"
|
||||
width="128"
|
||||
height="128"
|
||||
version="1.1"
|
||||
viewBox="0 0 132.29 132.29"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="right-wing-gradient"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
y1="132.29"
|
||||
x2="132.29"
|
||||
y2="0">
|
||||
<stop offset="0%" stop-color="var(--butterfly-wr-0)"/>
|
||||
<stop offset="100%" stop-color="var(--butterfly-wr-1)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="m92.532 8.4622-12.705 14.323-9.9988 28.101-0.1483 16.167 17.719 19.86 0.1565 0.1518 11.809 9.1357 12.859 3.7536 10.718-14.924-0.204-19.263-6.646-11.36-8.142-0.9981 8.79-9.9657-6.81-21.574-5.98-12.229z"
|
||||
fill="url(#right-wing-gradient)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="splashText">
|
||||
Loading <b>{{ instance_name }}</b>...
|
||||
<br>
|
||||
({{ title ~ " " ~ version }})
|
||||
</div>
|
||||
<div id="splashSpinner">
|
||||
<svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1,0,0,1,12,12)">
|
||||
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1,0,0,1,12,12)">
|
||||
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,8 +93,8 @@ export const defaultStore = markRaw(
|
|||
"💢",
|
||||
"😥",
|
||||
"😇",
|
||||
"🥴",
|
||||
"🍮",
|
||||
"🦋",
|
||||
"🦊",
|
||||
],
|
||||
},
|
||||
mutedWords: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue