Lightemerald/windows-user-space-emulator
2
0
Fork 0
mirror of https://github.com/momo5502/emulator.git synced 2026-01-29 15:51:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract loader

Browse Source
This commit is contained in:
momo5502
2025-09-25 20:12:23 +02:00
parent 9a9e38d4a8
commit 7abc7dea0e
4 changed files with 367 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

622
page/src/animation.css
View File

@@ -1,311 +1,311 @@
:root {
--ring-full-color: #ffffff00;
--ring-half-color: #ffffff75;
}
/**
* 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;
content: "";
display: block;
height: 10px;
width: 10px;
}
:root {
--ring-full-color: #ffffff00;
--ring-half-color: #ffffff75;
}
/**
* 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;
content: "";
display: block;
height: 10px;
width: 10px;
}