/*! * Mysuti Page Loader — frontend animation styles * * All ten animations are pure CSS keyframes; no JS animation lib. * Colors come from CSS custom properties set inline in by * MPL_Frontend::inline_color_vars(): * * --mpl-bg overlay background (admin "Arka Plan Rengi") * --mpl-fg animation foreground (admin "Animasyon Rengi") * --mpl-fade fade-out duration in seconds * * The full-screen overlay is the default presentation. The Progress * Bar variant uses a top-positioned narrow strip (NProgress / YouTube * style) — `--bar` modifier removes the centered layout + bg paint. */ /* ── Overlay container ───────────────────────────────────────── */ #mysuti-loader-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: var( --mpl-bg, #FFFFFF ); opacity: 1; transition: opacity var( --mpl-fade, 0.3s ) ease; pointer-events: auto; color: var( --mpl-fg, #111827 ); } #mysuti-loader-overlay.is-hidden { opacity: 0 !important; pointer-events: none !important; } #mysuti-loader-overlay.is-removed { display: none !important; visibility: hidden !important; } /* Progress Bar variant — non-blocking, top strip only */ #mysuti-loader-overlay.mysuti-loader-overlay--bar { background: transparent; pointer-events: none; align-items: flex-start; justify-content: stretch; bottom: auto; height: 3px; } /* ── 1. Spinner — classic ring ───────────────────────────────── */ .mysuti-loader--spinner { width: 48px; height: 48px; border-radius: 50%; border: 3px solid color-mix( in srgb, var( --mpl-fg, #111827 ) 15%, transparent ); border-top-color: var( --mpl-fg, #111827 ); animation: mpl-spin 0.9s linear infinite; box-sizing: border-box; } @keyframes mpl-spin { to { transform: rotate( 360deg ); } } /* ── 2. Dots Pulse — three dots pulsating in sequence ────────── */ .mysuti-loader--dots { display: flex; gap: 10px; } .mysuti-loader--dots span { width: 12px; height: 12px; border-radius: 50%; background: var( --mpl-fg, #111827 ); animation: mpl-pulse 1.2s ease-in-out infinite; } .mysuti-loader--dots span:nth-child(2) { animation-delay: 0.15s; } .mysuti-loader--dots span:nth-child(3) { animation-delay: 0.30s; } @keyframes mpl-pulse { 0%, 80%, 100% { transform: scale( 0.6 ); opacity: 0.45; } 40% { transform: scale( 1 ); opacity: 1; } } /* ── 3. Bars — 5 vertical equalizer bars ─────────────────────── */ .mysuti-loader--bars { display: flex; gap: 4px; align-items: center; height: 48px; } .mysuti-loader--bars span { width: 5px; height: 100%; background: var( --mpl-fg, #111827 ); border-radius: 2px; transform-origin: center; animation: mpl-bars 1.0s ease-in-out infinite; } .mysuti-loader--bars span:nth-child(1) { animation-delay: -0.40s; } .mysuti-loader--bars span:nth-child(2) { animation-delay: -0.30s; } .mysuti-loader--bars span:nth-child(3) { animation-delay: -0.20s; } .mysuti-loader--bars span:nth-child(4) { animation-delay: -0.10s; } .mysuti-loader--bars span:nth-child(5) { animation-delay: 0.00s; } @keyframes mpl-bars { 0%, 100% { transform: scaleY( 0.3 ); } 50% { transform: scaleY( 1 ); } } /* ── 4. Ripple — two expanding circles ───────────────────────── */ .mysuti-loader--ripple { position: relative; width: 64px; height: 64px; } .mysuti-loader--ripple span { position: absolute; inset: 0; border: 2px solid var( --mpl-fg, #111827 ); border-radius: 50%; opacity: 0; animation: mpl-ripple 1.4s cubic-bezier( 0, 0.2, 0.8, 1 ) infinite; } .mysuti-loader--ripple span:nth-child(2) { animation-delay: -0.7s; } @keyframes mpl-ripple { 0% { transform: scale( 0.1 ); opacity: 1; } 100% { transform: scale( 1 ); opacity: 0; } } /* ── 5. Square Morph — square ⇄ circle with rotation ─────────── */ .mysuti-loader--morph { width: 40px; height: 40px; background: var( --mpl-fg, #111827 ); animation: mpl-morph 1.6s ease-in-out infinite; } @keyframes mpl-morph { 0%, 100% { border-radius: 4px; transform: rotate( 0 ); } 50% { border-radius: 50%; transform: rotate( 180deg ); } } /* ── 6. Progress Bar — top horizontal strip (NProgress) ──────── */ .mysuti-loader--progress { width: 100%; height: 3px; background: color-mix( in srgb, var( --mpl-fg, #111827 ) 10%, transparent ); overflow: hidden; position: relative; } .mysuti-loader--progress span { display: block; width: 30%; height: 100%; background: var( --mpl-fg, #111827 ); animation: mpl-progress 1.4s ease-in-out infinite; will-change: transform; } @keyframes mpl-progress { 0% { transform: translateX( -100% ); } 100% { transform: translateX( 400% ); } } /* ── 7. Logo Fade — soft fade in/out ─────────────────────────── */ .mysuti-loader--logo img { max-width: 220px; max-height: 90px; display: block; animation: mpl-logo-fade 1.6s ease-in-out infinite; } @keyframes mpl-logo-fade { 0%, 100% { opacity: 0.30; transform: scale( 0.96 ); } 50% { opacity: 1; transform: scale( 1 ); } } /* ── 8. Skeleton Shimmer — content-block placeholder ─────────── */ .mysuti-loader--skeleton { display: flex; flex-direction: column; gap: 12px; width: 280px; } .mpl-sk-line { height: 14px; border-radius: 4px; background: color-mix( in srgb, var( --mpl-fg, #111827 ) 10%, transparent ) linear-gradient( 90deg, color-mix( in srgb, var( --mpl-fg, #111827 ) 4%, transparent ) 0%, color-mix( in srgb, var( --mpl-fg, #111827 ) 18%, transparent ) 50%, color-mix( in srgb, var( --mpl-fg, #111827 ) 4%, transparent ) 100% ); background-size: 200% 100%; animation: mpl-shimmer 1.5s ease-in-out infinite; } .mpl-sk-line--short { width: 60%; } @keyframes mpl-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* ── 9. Orbit — center + two orbiting satellites ─────────────── */ .mysuti-loader--orbit { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; } .mpl-orbit-center { width: 8px; height: 8px; background: var( --mpl-fg, #111827 ); border-radius: 50%; } .mpl-orbit-ring { position: absolute; inset: 0; border-radius: 50%; } .mpl-orbit-ring--1 { animation: mpl-orbit 1.4s linear infinite; } .mpl-orbit-ring--2 { animation: mpl-orbit 2.0s linear infinite reverse; } .mpl-orbit-ring span { position: absolute; top: -1px; left: 50%; transform: translate( -50%, -50% ); width: 8px; height: 8px; border-radius: 50%; background: var( --mpl-fg, #111827 ); } .mpl-orbit-ring--2 span { top: auto; bottom: -1px; width: 6px; height: 6px; opacity: 0.65; } @keyframes mpl-orbit { to { transform: rotate( 360deg ); } } /* ── 10. Minimal Line — single thin line sliding ─────────────── */ .mysuti-loader--minimal { width: 80px; height: 1.5px; background: color-mix( in srgb, var( --mpl-fg, #111827 ) 12%, transparent ); position: relative; overflow: hidden; } .mysuti-loader--minimal span { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: var( --mpl-fg, #111827 ); animation: mpl-minimal 1.2s ease-in-out infinite; } @keyframes mpl-minimal { 0% { left: -30%; } 100% { left: 100%; } } /* ── Reduced motion respect ──────────────────────────────────── */ @media ( prefers-reduced-motion: reduce ) { #mysuti-loader-overlay, #mysuti-loader-overlay * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }