NDOJ/resources/html/loading-page.html
2024-06-24 19:42:50 -05:00

22 lines
No EOL
1.3 KiB
HTML

<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
</style>
<div style="height: 80vh; margin: 0; display: flex; align-items: center; justify-content: center; font-family: cursive; width: 100%;">
<div class="loader" style="display: flex; align-items: center; justify-content: center;">
<span style="color: #1b9b66; font-size: 2rem; font-weight: bold; margin: 0 0.2rem; animation: bounce 1.5s infinite;">L</span>
<span style="color: #daa335; font-size: 2rem; font-weight: bold; margin: 0 0.2rem; animation: bounce 1.5s infinite; animation-delay: 0.3s;">Q</span>
<span style="color: #283a7e; font-size: 2rem; font-weight: bold; margin: 0 0.2rem; animation: bounce 1.5s infinite; animation-delay: 0.6s;">D</span>
<span style="color: #dd7030; font-size: 2rem; font-weight: bold; margin: 0 0.2rem; animation: bounce 1.5s infinite; animation-delay: 0.9s;">O</span>
<span style="color: #983c35; font-size: 2rem; font-weight: bold; margin: 0 0.2rem; animation: bounce 1.5s infinite; animation-delay: 1.2s;">J</span>
</div>
</div>