36 lines
1.6 KiB
CSS
36 lines
1.6 KiB
CSS
/* Tab Loading Mask */
|
|
.tab-loading-container { position: relative; height: 100%; }
|
|
.tab-loading-mask {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(255,255,255,0.9); display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; z-index: 9999;
|
|
opacity: 1; transition: opacity 0.3s;
|
|
}
|
|
.tab-loading-mask.fade-out { opacity: 0; }
|
|
.tab-loading-mask.hidden { display: none; }
|
|
|
|
/* Loading Animation */
|
|
.loading-animation { position: relative; width: 60px; height: 60px; margin-bottom: 15px; }
|
|
.loading-spinner {
|
|
position: absolute; width: 100%; height: 100%; border-radius: 50%;
|
|
border: 3px solid #f3f3f3; border-top-color: #3498db;
|
|
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
}
|
|
.loading-spinner-inner {
|
|
position: absolute; width: 80%; height: 80%; top: 10%; left: 10%;
|
|
border-radius: 50%; border: 3px solid #f3f3f3; border-top-color: #e74c3c;
|
|
animation: spinReverse 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
}
|
|
.loading-text { color: #555; font-size: 14px; font-weight: 500; letter-spacing: 1px; }
|
|
.loading-progress {
|
|
width: 120px; height: 4px; background: #eee; border-radius: 2px;
|
|
margin-top: 15px; overflow: hidden;
|
|
}
|
|
.progress-bar {
|
|
height: 100%; width: 0%; background: linear-gradient(90deg, #3498db, #2ecc71);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
@keyframes spinReverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } |