feat: add loading bar

This commit is contained in:
julius 2025-01-27 14:50:18 +01:00
parent c91d454f57
commit b1df421992
Signed by: julius
GPG Key ID: C80A63E6A5FD7092
2 changed files with 45 additions and 6 deletions

View File

@ -1,3 +1,7 @@
* {
border-radius: 8px;
}
body { body {
background-color: aliceblue; background-color: aliceblue;
position: relative; position: relative;
@ -149,3 +153,34 @@ button {
right: 8px; right: 8px;
font-size: 150%; font-size: 150%;
} }
.loader {
display: block;
position: relative;
height: 12px;
width: 96%;
border: 4px solid black;
overflow: hidden;
}
.loader::after {
content: "";
width: 32%;
height: 120%;
background: #36c;
position: absolute;
top: -2px;
left: 0;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
left: 0;
transform: translateX(-100%);
}
100% {
left: 100%;
transform: translateX(0%);
}
}

View File

@ -80,13 +80,17 @@ export function SelectUser({
className="dragbox reservoir" className="dragbox reservoir"
animation={200} animation={200}
> >
{players.map((item, _) => ( {players.length < 1 ? (
<div className="extra-margin"> <span className="loader"></span>
<div key={item.id} className="item"> ) : (
{item.name} players.map((item, _) => (
<div key={"extra" + item.id} className="extra-margin">
<div key={item.id} className="item">
{item.name}
</div>
</div> </div>
</div> ))
))} )}
</ReactSortable> </ReactSortable>
</div> </div>
)} )}