litruv/lit.ruv.wtf
1
0
Fork 0
mirror of https://github.com/litruv/lit.ruv.wtf.git synced 2026-07-24 10:46:03 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add loading indicator for post fetching and error handling

Browse Source
This commit is contained in:
Litruv
2025-10-03 05:24:43 +10:00
parent cc6d60e263
commit 34010f80cf
2 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
website/style.css
View File

@@ -658,4 +658,54 @@ footer a:hover {
opacity: 0;
transform: translateY(50px) rotate(var(--post-rotation, 0deg));
animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Loading indicator styles */
.loading-posts {
text-align: center;
margin: 2rem auto;
padding: 2rem;
background: var(--post-bg);
border: 2px solid var(--post-border);
box-shadow: 3px 3px 0 var(--shadow-light);
max-width: 400px;
transform: rotate(-1deg);
color: #666;
font-family: inherit;
position: relative;
}
.loading-posts::before {
content: "";
position: absolute;
top: 5px;
left: 0;
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.05);
z-index: 0;
border-radius: 25%;
filter: blur(3px);
}
.loading-posts-content {
position: relative;
z-index: 1;
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}