Crash_Override/FreeDATA
1
0
Fork 0
mirror of https://github.com/DJ2LS/FreeDATA synced 2024-05-14 08:04:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fancy startup animation

Browse source
This commit is contained in:
DJ2LS 2023-09-05 20:32:12 +02:00
parent 16b445afc2
commit 9b502fa50c
2 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
gui_vue/electron/preload.ts
View file

@ -35,17 +35,35 @@ function useLoading() {
const className = `loaders-css__square-spin`
const styleContent = `
@keyframes square-spin {
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
0% {
transform: rotate(0deg);
background-image: url('../public/icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
25% { transform: perspective(100px) rotateX(180deg) rotateY(0);
background-image: url('../public/icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg);
background-image: url('../public/icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
75% { transform: perspective(100px) rotateX(0) rotateY(180deg);
background-image: url('../public/icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
100% { transform: perspective(100px) rotateX(0) rotateY(0);
background-image: url('../public/icon_cube_border.png'); /* Replace with the URL of your image */
background-size: cover; /* Scale the image to cover the entire container */
}
}
.${className} > div {
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #fff;
animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
animation: square-spin 6s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
position: fixed;

BIN
gui_vue/public/icon_cube_border.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 590 KiB