vato007/ingey-eager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading spinner for slow duck init
All checks were successful
build / build (push) Successful in 2m58s
Details

Browse Source
This commit is contained in:
vato007
2025-07-08 18:13:15 +09:30
parent b7f41d18d4
commit a53c01ab8e
2 changed files with 61 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/index.html
View File

@@ -10,18 +10,19 @@
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=close,mediation" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=close,mediation"
/> />
<style>
.material-symbols-outlined {
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 20;
font-size: 1rem;
}
</style>
</head> </head>
<body class="h-screen"> <body class="h-screen">
<app-root></app-root> <app-root>
<!-- Loading spinner while duck db is loading -->
<div class="flex flex-col items-center justify-center h-full">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Loading Ingey</div>
</div>
</app-root>
</body> </body>
</html> </html>

49
src/styles.scss
View File

@@ -11,3 +11,52 @@ html {
p-scroller { p-scroller {
height: 100%; height: 100%;
} }
.material-symbols-outlined {
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 20;
font-size: 1rem;
}
.lds-ring,
.lds-ring div {
box-sizing: border-box;
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid currentColor;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}