OwlBoard/web-pwa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add train details to train endpoint. Formatting and styling incomplete

Browse Source
This commit is contained in:
Fred Boniface
2026-05-03 09:03:45 +01:00
parent 91cb119b7d
commit 24960707e2
10 changed files with 473 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/lib/components/ui/Loading.svelte
View File

@@ -1,59 +1,66 @@
<script lang="ts">
let {
message = "Loading..."
} = $props();
let { message = 'Loading...' } = $props();
</script>
<div class="loading-state">
<div class="track">
<div class="shuttle"></div>
</div>
<p>{message}</p>
<div class="track">
<div class="shuttle"></div>
</div>
<p>{message}</p>
</div>
<style>
.loading-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4rem 2rem;
width: 75%;
margin: auto;
}
.loading-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4rem 2rem;
width: 75%;
margin: auto;
}
.track {
width: 160px;
height: 3px;
background-color: var(--color-title);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.track {
width: 160px;
height: 3px;
background-color: var(--color-title);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.shuttle {
position: absolute;
width: 50%;
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
animation: data-travel 1.6s infinite ease-in-out;
}
.shuttle {
position: absolute;
width: 50%;
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
animation: data-travel 1.6s infinite ease-in-out;
}
p {
font-family: 'URW Gothic', sans-serif;
letter-spacing: 0.15em;
color: var(--color-title);
animation: pulse 2s infinite ease-in-out;
}
p {
font-family: 'URW Gothic', sans-serif;
letter-spacing: 0.15em;
color: var(--color-title);
animation: pulse 2s infinite ease-in-out;
}
@keyframes data-travel {
0% { left: -50%; }
100% { left: 100%; }
}
@keyframes data-travel {
0% {
left: -50%;
}
100% {
left: 100%;
}
}
@keyframes pulse {
0%, 100% {opacity: 1;}
50% {opacity: 0.4;}
}
</style>
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
</style>