feat: Add loading overlay feedback for PDF downloads
UX Improvement: - Added visual feedback during PDF generation process - Users now see immediate response when clicking download button - Clear communication about what's happening during the wait New Features: - Loading overlay with animated spinner - Format-specific estimated generation times (Short: ~3s, Default: ~4s, Long: ~8s) - Blur effect on modal background during loading - Bilingual support (English/Spanish) - Automatic modal close after download completes CSS Updates (static/css/04-interactive/_modals.css): - Added .pdf-loading-overlay with glassmorphism effect - Spinning animation for loader (1s linear infinite) - Fade-in animation (300ms) - Accessibility: respects prefers-reduced-motion - Background blur when loading active HTML Updates (templates/partials/modals/pdf-modal.html): - Loading overlay structure with spinner - Dynamic loading messages based on selected format - Enhanced downloadPDF() function with timing logic Before: Click → silence → download appears After: Click → overlay + spinner + estimate → download appears
This commit is contained in:
@@ -769,4 +769,96 @@
|
||||
.pdf-download-btn {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.pdf-loading-overlay {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.pdf-loading-spinner {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
PDF LOADING OVERLAY - Visual Feedback During Download
|
||||
============================================================================= */
|
||||
|
||||
.pdf-loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-radius: 24px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
animation: overlayFadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.pdf-loading-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes overlayFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-loading-content {
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.pdf-loading-spinner {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 1.5rem;
|
||||
border: 4px solid rgba(239, 68, 68, 0.2);
|
||||
border-top-color: #ef4444;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-loading-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.pdf-loading-message {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-gray);
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pdf-loading-estimate {
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Blur the modal content when overlay is active */
|
||||
.info-modal-content.loading-active > *:not(.pdf-loading-overlay) {
|
||||
filter: blur(3px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user