Spaces:
Sleeping
Sleeping
| /* ============================================ | |
| LOADER STYLES | |
| ============================================ */ | |
| .loader { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .loader__fullscreen { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| background: var(--color-neutral-50); | |
| } | |
| .loader__spinner { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Rings */ | |
| .loader__ring { | |
| position: absolute; | |
| border: 3px solid transparent; | |
| border-radius: 50%; | |
| animation: spin 1.5s linear infinite; | |
| } | |
| .loader--sm .loader__ring { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .loader--md .loader__ring { | |
| width: 56px; | |
| height: 56px; | |
| } | |
| .loader--lg .loader__ring { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .loader__ring:nth-child(1) { | |
| border-top-color: var(--color-primary-500); | |
| animation-duration: 1.2s; | |
| } | |
| .loader__ring:nth-child(2) { | |
| border-right-color: var(--color-secondary-500); | |
| animation-duration: 1.8s; | |
| animation-direction: reverse; | |
| } | |
| .loader__ring:nth-child(2) { | |
| width: calc(100% - 12px); | |
| height: calc(100% - 12px); | |
| } | |
| .loader__ring:nth-child(3) { | |
| border-bottom-color: var(--color-accent-500); | |
| animation-duration: 2.4s; | |
| width: calc(100% - 24px); | |
| height: calc(100% - 24px); | |
| } | |
| .loader__logo { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .loader--sm .loader__logo { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .loader--lg .loader__logo { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .loader__text { | |
| font-size: 0.9rem; | |
| color: var(--color-neutral-500); | |
| font-weight: 500; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |