Lightemerald/windows-user-space-emulator
2
0
Fork 0
mirror of https://github.com/momo5502/emulator.git synced 2026-01-20 12:13:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use animated gradient

Browse Source
This commit is contained in:
momo5502
2025-09-26 09:32:19 +02:00
parent 1d4dee7727
commit 22b579d186
2 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
page/src/App.tsx
View File

@@ -25,9 +25,7 @@ function Spinner() {
}
return (
<div className="fixed z-9999 top-10 right-10">
<span className="loader"></span>
</div>
<div className="fixed z-9999 top-0 left-0 right-0 h-[2px] animated-gradient"></div>
);
}

49
page/src/animation.css
View File

@@ -1,33 +1,30 @@
.loader {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.loader::after,
.loader::before {
content: "";
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;
:root {
--gradient-loader-1: rgb(38, 38, 38);
--gradient-loader-2: rgb(255, 255, 255);
}
@keyframes animloader {
.animated-gradient {
background: repeating-linear-gradient(
to right,
var(--gradient-loader-1) 0%,
var(--gradient-loader-1) 35%,
var(--gradient-loader-2) 50%,
var(--gradient-loader-1) 65%,
var(--gradient-loader-1) 100%
);
width: 100%;
background-size: 200% auto;
background-position: 0 100%;
animation: gradient 2s infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes gradient {
0% {
transform: scale(0);
opacity: 1;
background-position: 0 0;
}
100% {
transform: scale(1);
opacity: 0;
background-position: -200% 0;
}
}