frontend/app/spa-loading-template.html

47 lines
1.3 KiB
HTML
Raw Permalink Normal View History

<div class="loader-container">
<div class="loader-spinner-container">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-loader-icon loader-spinner">
<path d="M12 2v4"></path>
<path d="m16.2 7.8 2.9-2.9"></path>
<path d="M18 12h4"></path>
<path d="m16.2 16.2 2.9 2.9"></path>
<path d="M12 18v4"></path>
<path d="m4.9 19.1 2.9-2.9"></path>
<path d="M2 12h4"></path>
<path d="m4.9 4.9 2.9 2.9"></path>
</svg>
</div>
</div>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
width: 100dvw;
padding: 1.5rem;
}
.loader-spinner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader-spinner {
animation: spin 1s linear infinite;
width: 2rem;
height: 2rem;
}
</style>