Lightemerald/windows-user-space-emulator
2
0
Fork 0
mirror of https://github.com/momo5502/emulator.git synced 2026-01-19 11:43:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Choose different loading animation

Browse Source
This commit is contained in:
momo5502
2025-09-26 08:47:17 +02:00
parent fb7efdaa33
commit 1d4dee7727
2 changed files with 33 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
page/src/App.tsx
View File

@@ -25,7 +25,9 @@ function Spinner() {
}
return (
<div className="fixed z-9999 top-10 right-10 p-8 rounded-2xl ring-of-dots bg-[#00000081]"></div>
<div className="fixed z-9999 top-10 right-10">
<span className="loader"></span>
</div>
);
}

338
page/src/animation.css
View File

@@ -1,311 +1,33 @@
:root {
--ring-full-color: #ffffff00;
--ring-half-color: #ffffff75;
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
/**
* Ring of dots
*
* @author jh3y
*/
@-webkit-keyframes ring-of-dots {
0% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
}
14.28571% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 var(--ring-half-color),
-4.45042px -19.49856px 0 0 var(--ring-full-color),
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 var(--ring-half-color),
-4.45042px -19.49856px 0 0 var(--ring-full-color),
12.4698px -15.63663px 0 0 white;
}
28.57143% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 var(--ring-half-color),
-18.01938px -8.67767px 0 0 var(--ring-full-color),
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 var(--ring-half-color),
-18.01938px -8.67767px 0 0 var(--ring-full-color),
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
42.85714% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 var(--ring-half-color),
-18.01938px 8.67767px 0 0 var(--ring-full-color),
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 var(--ring-half-color),
-18.01938px 8.67767px 0 0 var(--ring-full-color),
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
57.14286% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 var(--ring-half-color),
-4.45042px 19.49856px 0 0 var(--ring-full-color),
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 var(--ring-half-color),
-4.45042px 19.49856px 0 0 var(--ring-full-color),
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
71.42857% {
-webkit-box-shadow:
20px 0px 0 0 var(--ring-half-color),
12.4698px 15.63663px 0 0 var(--ring-full-color),
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 var(--ring-half-color),
12.4698px 15.63663px 0 0 var(--ring-full-color),
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
85.71429% {
-webkit-box-shadow:
20px 0px 0 0 var(--ring-full-color),
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 var(--ring-half-color);
box-shadow:
20px 0px 0 0 var(--ring-full-color),
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 var(--ring-half-color);
}
100% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
}
}
@keyframes ring-of-dots {
0% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
}
14.28571% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 var(--ring-half-color),
-4.45042px -19.49856px 0 0 var(--ring-full-color),
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 var(--ring-half-color),
-4.45042px -19.49856px 0 0 var(--ring-full-color),
12.4698px -15.63663px 0 0 white;
}
28.57143% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 var(--ring-half-color),
-18.01938px -8.67767px 0 0 var(--ring-full-color),
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 var(--ring-half-color),
-18.01938px -8.67767px 0 0 var(--ring-full-color),
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
42.85714% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 var(--ring-half-color),
-18.01938px 8.67767px 0 0 var(--ring-full-color),
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 var(--ring-half-color),
-18.01938px 8.67767px 0 0 var(--ring-full-color),
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
57.14286% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 var(--ring-half-color),
-4.45042px 19.49856px 0 0 var(--ring-full-color),
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 var(--ring-half-color),
-4.45042px 19.49856px 0 0 var(--ring-full-color),
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
71.42857% {
-webkit-box-shadow:
20px 0px 0 0 var(--ring-half-color),
12.4698px 15.63663px 0 0 var(--ring-full-color),
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
box-shadow:
20px 0px 0 0 var(--ring-half-color),
12.4698px 15.63663px 0 0 var(--ring-full-color),
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 white;
}
85.71429% {
-webkit-box-shadow:
20px 0px 0 0 var(--ring-full-color),
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 var(--ring-half-color);
box-shadow:
20px 0px 0 0 var(--ring-full-color),
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 white,
12.4698px -15.63663px 0 0 var(--ring-half-color);
}
100% {
-webkit-box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
box-shadow:
20px 0px 0 0 white,
12.4698px 15.63663px 0 0 white,
-4.45042px 19.49856px 0 0 white,
-18.01938px 8.67767px 0 0 white,
-18.01938px -8.67767px 0 0 white,
-4.45042px -19.49856px 0 0 var(--ring-half-color),
12.4698px -15.63663px 0 0 var(--ring-full-color);
}
}
.ring-of-dots:before {
animation: ring-of-dots 1s infinite linear reverse;
border-radius: 10px;
.loader::after,
.loader::before {
content: "";
display: block;
height: 10px;
width: 10px;
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
animation: animloader 2s linear infinite;
}
.loader::after {
animation-delay: 1s;
}
@keyframes animloader {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}