🌹 CHEATGLOBAL ÖZEL 🌹 🎀 Cg -UI Loader Base (Python) 🎀OPEN SOURCE

EsDeeKid1337 · 9 May 2026

Selamlar beyler,

Kendi projelerimde kullandığım, görsel geçişleri ve animasyonları üzerinde uğraştığım bir loader arayüzünü açık kaynak olarak paylaşıyorum. Piyasada çok fazla düz/sıkıcı loader var, bu biraz daha akıcı ve profesyonel dursun isteyenlerin işine yarayacaktır.

Neler Ekledim?

Akıcı Açılış: Panel küçük bir kutu olarak başlar, sonra yumuşak bir animasyonla genişler.
Blur Efektli Yükleme: "INITIALIZE" dediğinizde arka plan kararır ve bulanıklaşır (Blur), odak tamamen yükleme barına geçer.
PNG to Byte Mantığı: Ortada parlayan yeşil bir görsel alanı var. Yükleme barı dolarken o da arkadan neon efektle parlıyor.
Fiziksel Hata Animasyonu: Sunucuya bağlanamadığında ortadaki ikonun "aşağı düşme" efekti var, sadece yazı değil görsel olarak da hata verdiğini hissettiriyor.
GPU Dostu: Animasyonlar işlemciyi yormaz, kasma yapmaz.

Teknik Detaylar

Altyapı: Python (pywebview)
Tasarım: HTML5 / CSS3 (JetBrains Mono fontu ile terminal havası verildi)
Modifikasyon: Kod çok basit, renkleri ve logoları 2 dakikada kendinize göre değiştirebilirsiniz.

Görüntü

Kaynak Kodu

Python

Kod:

import webview
import ctypes

# Ekranı ortala
user32 = ctypes.windll.user32
sw, sh = user32.GetSystemMetrics(0), user32.GetSystemMetrics(1)
ww, wh = 600, 420
wx, wy = (sw - ww) // 2, (sh - wh) // 2

html_layout = """
<!DOCTYPE html>
<html lang="tr">
<head>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --accent: #ff003c;
            --success: #00ff88;
            --bg: #050505;
            --panel: #0a0a0a;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; font-family: 'JetBrains Mono', monospace; }
       
        body { background: transparent; display: flex; justify-content: center; align-items: center; height: 100vh; }

        #container {
            width: 120px; height: 120px; background: var(--bg); border: 1px solid var(--accent);
            display: flex; justify-content: center; align-items: center; position: relative;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 0 0 20px rgba(255, 0, 60, 0.2);
        }

        .glitch-loader {
            width: 60px; height: 60px; border: 2px solid var(--accent); position: relative;
            animation: loader-spin 2s infinite linear;
        }
        @keyframes loader-spin {
            0% { transform: rotate(0deg); border-radius: 0%; }
            50% { transform: rotate(180deg); border-radius: 50%; border-color: #fff; }
            100% { transform: rotate(360deg); border-radius: 0%; }
        }

        .expanded { width: 580px !important; height: 380px !important; border: 1px solid #111 !important; background: var(--panel) !important; border-radius: 4px; }

        #auth-layer, #menu-layer { display: none; width: 100%; padding: 40px; text-align: center; opacity: 0; }
        h1 { color: #fff; font-size: 18px; letter-spacing: 5px; margin-bottom: 30px; text-transform: uppercase; }
        input { background: #000; border: 1px solid #222; color: var(--accent); padding: 15px; width: 90%; outline: none; font-size: 12px; letter-spacing: 2px; }

        #welcome-text { position: absolute; font-weight: 800; font-size: 40px; color: #fff; display: none; text-shadow: 2px 2px var(--accent); z-index: 5; }

        .card {
            background: #000; border-left: 3px solid var(--accent); padding: 20px; margin-bottom: 15px;
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
            transition: 0.2s; transform: translateX(-50px); opacity: 0;
        }
        .card:hover { background: #080808; transform: scale(1.02) !important; }
        .btn-load { background: var(--accent); color: #000; padding: 5px 15px; font-size: 10px; font-weight: 800; border-radius: 2px; cursor: pointer; }

        /* --- YENİ EKLENEN LOAD EKRANI (BLUR) --- */
        #load-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); backdrop-filter: blur(15px);
            display: none; flex-direction: column; justify-content: center; align-items: center;
            z-index: 100; opacity: 0; transition: 0.5s;
        }

        .byte-box {
            width: 90px; height: 90px; background: var(--success);
            box-shadow: 0 0 40px var(--success); border-radius: 12px;
            margin-bottom: 30px; display: flex; justify-content: center; align-items: center;
            font-weight: 800; font-size: 10px; color: #000;
            transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .progress-wrap { width: 60%; height: 4px; background: #111; border-radius: 10px; overflow: hidden; }
        .progress-bar { width: 0%; height: 100%; background: var(--success); box-shadow: 0 0 15px var(--success); transition: 0.1s linear; }
       
        .status-txt { margin-top: 15px; color: #fff; font-size: 10px; letter-spacing: 1px; }

        /* --- FAIL DURUMU --- */
        .byte-dropped { transform: translateY(50px) rotate(20deg); opacity: 0.3; filter: grayscale(1) drop-shadow(0 0 5px #ff0000); }
        .fail-msg { color: #ff003c !important; text-shadow: 0 0 10px #ff003c; }

        .slide-in { animation: slideIn 0.4s forwards; }
        @keyframes slideIn { to { transform: translateX(0); opacity: 1; } }

    </style>
</head>
<body>

    <div id="container">
        <div id="loader" class="glitch-loader"></div>
       
        <div id="auth-layer">
            <h1>Authentication</h1>
            <input type="text" id="key" placeholder="USER-LICENSE-TOKEN" spellcheck="false">
        </div>

        <div id="welcome-text">ZUXE.SYS</div>

        <div id="menu-layer">
            <div style="text-align: left; margin-bottom: 25px; color: #444; font-size: 10px;">SYSTEMS READY // SELECT MODULE</div>
            <div class="card" onclick="startLoad()">
                <span>VALORANT // KERNEL</span>
                <div class="btn-load">INITIALIZE</div>
            </div>
            <div class="card" onclick="startLoad()">
                <span>CS2 // INTERNAL</span>
                <div class="btn-load">INITIALIZE</div>
            </div>
        </div>

        <!-- LOAD OVERLAY -->
        <div id="load-overlay">
            <div id="byte-img" class="byte-box">CG</div>
            <div class="progress-wrap">
                <div id="bar-fill" class="progress-bar"></div>
            </div>
            <div id="status-label" class="status-txt">INITIALIZING BYTES...</div>
        </div>
    </div>

    <script>
        const container = document.getElementById('container');
        const loader = document.getElementById('loader');
        const auth = document.getElementById('auth-layer');
        const welcome = document.getElementById('welcome-text');
        const menu = document.getElementById('menu-layer');
        const overlay = document.getElementById('load-overlay');

        function startLoad() {
            overlay.style.display = 'flex';
            setTimeout(() => { overlay.style.opacity = '1'; }, 10);

            let progress = 0;
            const bar = document.getElementById('bar-fill');
            const label = document.getElementById('status-label');
            const img = document.getElementById('byte-img');

            const interval = setInterval(() => {
                if (progress >= 75) { // Sunucu hatası taklidi
                    clearInterval(interval);
                    setTimeout(() => {
                        img.classList.add('byte-dropped');
                        label.innerText = "FAILED TO CONNECT SERVER";
                        label.classList.add('fail-msg');
                    }, 500);
                } else {
                    progress++;
                    bar.style.width = progress + '%';
                    if(progress > 40) label.innerText = "MIRRORING PIPE DATA...";
                }
            }, 35);
        }

        function sequence() {
            setTimeout(() => {
                loader.style.display = 'none';
                container.classList.add('expanded');
                setTimeout(() => {
                    auth.style.display = 'block';
                    auth.style.opacity = '1';
                }, 400);

                setTimeout(() => {
                    auth.style.transition = '0.2s';
                    auth.style.opacity = '0';
                    setTimeout(() => {
                        auth.style.display = 'none';
                        welcome.style.display = 'block';
                        setTimeout(() => {
                            welcome.style.transition = '0.4s cubic-bezier(0.19, 1, 0.22, 1)';
                            welcome.style.transform = 'translateY(-130px) scale(0.5)';
                            menu.style.display = 'block';
                            menu.style.opacity = '1';
                            const cards = document.querySelectorAll('.card');
                            cards.forEach((c, i) => {
                                setTimeout(() => { c.classList.add('slide-in'); }, i * 150);
                            });
                        }, 800);
                    }, 200);
                }, 3000);
            }, 1500);
        }
        window.onload = sequence;
    </script>
</body>
</html>
"""

if __name__ == '__main__':
    window = webview.create_window(
        'CORE CONTROL',
        html=html_layout,
        width=ww, height=wh, x=wx, y=wy,
        frameless=True, easy_drag=True,
        background_color='#000000'
    )
    webview.start()

Nasıl Kullanılır?

Bilgisayarınızda Python yüklü olmalı. Terminale pip install pywebview yazıp kütüphaneyi kurun, ardından kodu çalıştırın. Hepsi bu kadar.

Ufak bir teşekkür veya yorumunuzu eksik etmeyin, herkese iyi forumlar!

laangel · 9 May 2026

solo1337 · 9 May 2026

these little aged guys cant make anything without AI

Sampas15 · 9 May 2026

zuxe' Alıntı:

Selamlar beyler,

Kendi projelerimde kullandığım, görsel geçişleri ve animasyonları üzerinde uğraştığım bir loader arayüzünü açık kaynak olarak paylaşıyorum. Piyasada çok fazla düz/sıkıcı loader var, bu biraz daha akıcı ve profesyonel dursun isteyenlerin işine yarayacaktır.

Neler Ekledim?

Akıcı Açılış: Panel küçük bir kutu olarak başlar, sonra yumuşak bir animasyonla genişler.
Blur Efektli Yükleme: "INITIALIZE" dediğinizde arka plan kararır ve bulanıklaşır (Blur), odak tamamen yükleme barına geçer.
PNG to Byte Mantığı: Ortada parlayan yeşil bir görsel alanı var. Yükleme barı dolarken o da arkadan neon efektle parlıyor.
Fiziksel Hata Animasyonu: Sunucuya bağlanamadığında ortadaki ikonun "aşağı düşme" efekti var, sadece yazı değil görsel olarak da hata verdiğini hissettiriyor.
GPU Dostu: Animasyonlar işlemciyi yormaz, kasma yapmaz.

Teknik Detaylar

Altyapı: Python (pywebview)
Tasarım: HTML5 / CSS3 (JetBrains Mono fontu ile terminal havası verildi)
Modifikasyon: Kod çok basit, renkleri ve logoları 2 dakikada kendinize göre değiştirebilirsiniz.

Görüntü

(Buraya loader'ın bir ekran görüntüsünü veya kısa bir klibini ekle kanka, çok fark eder)

Kaynak Kodu

Python

Kod:

import webview
import ctypes

# Ekranı ortala
user32 = ctypes.windll.user32
sw, sh = user32.GetSystemMetrics(0), user32.GetSystemMetrics(1)
ww, wh = 600, 420
wx, wy = (sw - ww) // 2, (sh - wh) // 2

html_layout = """
<!DOCTYPE html>
<html lang="tr">
<head>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --accent: #ff003c;
            --success: #00ff88;
            --bg: #050505;
            --panel: #0a0a0a;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; font-family: 'JetBrains Mono', monospace; }
       
        body { background: transparent; display: flex; justify-content: center; align-items: center; height: 100vh; }

        #container {
            width: 120px; height: 120px; background: var(--bg); border: 1px solid var(--accent);
            display: flex; justify-content: center; align-items: center; position: relative;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 0 0 20px rgba(255, 0, 60, 0.2);
        }

        .glitch-loader {
            width: 60px; height: 60px; border: 2px solid var(--accent); position: relative;
            animation: loader-spin 2s infinite linear;
        }
        @keyframes loader-spin {
            0% { transform: rotate(0deg); border-radius: 0%; }
            50% { transform: rotate(180deg); border-radius: 50%; border-color: #fff; }
            100% { transform: rotate(360deg); border-radius: 0%; }
        }

        .expanded { width: 580px !important; height: 380px !important; border: 1px solid #111 !important; background: var(--panel) !important; border-radius: 4px; }

        #auth-layer, #menu-layer { display: none; width: 100%; padding: 40px; text-align: center; opacity: 0; }
        h1 { color: #fff; font-size: 18px; letter-spacing: 5px; margin-bottom: 30px; text-transform: uppercase; }
        input { background: #000; border: 1px solid #222; color: var(--accent); padding: 15px; width: 90%; outline: none; font-size: 12px; letter-spacing: 2px; }

        #welcome-text { position: absolute; font-weight: 800; font-size: 40px; color: #fff; display: none; text-shadow: 2px 2px var(--accent); z-index: 5; }

        .card {
            background: #000; border-left: 3px solid var(--accent); padding: 20px; margin-bottom: 15px;
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
            transition: 0.2s; transform: translateX(-50px); opacity: 0;
        }
        .card:hover { background: #080808; transform: scale(1.02) !important; }
        .btn-load { background: var(--accent); color: #000; padding: 5px 15px; font-size: 10px; font-weight: 800; border-radius: 2px; cursor: pointer; }

        /* --- YENİ EKLENEN LOAD EKRANI (BLUR) --- */
        #load-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); backdrop-filter: blur(15px);
            display: none; flex-direction: column; justify-content: center; align-items: center;
            z-index: 100; opacity: 0; transition: 0.5s;
        }

        .byte-box {
            width: 90px; height: 90px; background: var(--success);
            box-shadow: 0 0 40px var(--success); border-radius: 12px;
            margin-bottom: 30px; display: flex; justify-content: center; align-items: center;
            font-weight: 800; font-size: 10px; color: #000;
            transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .progress-wrap { width: 60%; height: 4px; background: #111; border-radius: 10px; overflow: hidden; }
        .progress-bar { width: 0%; height: 100%; background: var(--success); box-shadow: 0 0 15px var(--success); transition: 0.1s linear; }
       
        .status-txt { margin-top: 15px; color: #fff; font-size: 10px; letter-spacing: 1px; }

        /* --- FAIL DURUMU --- */
        .byte-dropped { transform: translateY(50px) rotate(20deg); opacity: 0.3; filter: grayscale(1) drop-shadow(0 0 5px #ff0000); }
        .fail-msg { color: #ff003c !important; text-shadow: 0 0 10px #ff003c; }

        .slide-in { animation: slideIn 0.4s forwards; }
        @keyframes slideIn { to { transform: translateX(0); opacity: 1; } }

    </style>
</head>
<body>

    <div id="container">
        <div id="loader" class="glitch-loader"></div>
       
        <div id="auth-layer">
            <h1>Authentication</h1>
            <input type="text" id="key" placeholder="USER-LICENSE-TOKEN" spellcheck="false">
        </div>

        <div id="welcome-text">ZUXE.SYS</div>

        <div id="menu-layer">
            <div style="text-align: left; margin-bottom: 25px; color: #444; font-size: 10px;">SYSTEMS READY // SELECT MODULE</div>
            <div class="card" onclick="startLoad()">
                <span>VALORANT // KERNEL</span>
                <div class="btn-load">INITIALIZE</div>
            </div>
            <div class="card" onclick="startLoad()">
                <span>CS2 // INTERNAL</span>
                <div class="btn-load">INITIALIZE</div>
            </div>
        </div>

        <!-- LOAD OVERLAY -->
        <div id="load-overlay">
            <div id="byte-img" class="byte-box">CG</div>
            <div class="progress-wrap">
                <div id="bar-fill" class="progress-bar"></div>
            </div>
            <div id="status-label" class="status-txt">INITIALIZING BYTES...</div>
        </div>
    </div>

    <script>
        const container = document.getElementById('container');
        const loader = document.getElementById('loader');
        const auth = document.getElementById('auth-layer');
        const welcome = document.getElementById('welcome-text');
        const menu = document.getElementById('menu-layer');
        const overlay = document.getElementById('load-overlay');

        function startLoad() {
            overlay.style.display = 'flex';
            setTimeout(() => { overlay.style.opacity = '1'; }, 10);

            let progress = 0;
            const bar = document.getElementById('bar-fill');
            const label = document.getElementById('status-label');
            const img = document.getElementById('byte-img');

            const interval = setInterval(() => {
                if (progress >= 75) { // Sunucu hatası taklidi
                    clearInterval(interval);
                    setTimeout(() => {
                        img.classList.add('byte-dropped');
                        label.innerText = "FAILED TO CONNECT SERVER";
                        label.classList.add('fail-msg');
                    }, 500);
                } else {
                    progress++;
                    bar.style.width = progress + '%';
                    if(progress > 40) label.innerText = "MIRRORING PIPE DATA...";
                }
            }, 35);
        }

        function sequence() {
            setTimeout(() => {
                loader.style.display = 'none';
                container.classList.add('expanded');
                setTimeout(() => {
                    auth.style.display = 'block';
                    auth.style.opacity = '1';
                }, 400);

                setTimeout(() => {
                    auth.style.transition = '0.2s';
                    auth.style.opacity = '0';
                    setTimeout(() => {
                        auth.style.display = 'none';
                        welcome.style.display = 'block';
                        setTimeout(() => {
                            welcome.style.transition = '0.4s cubic-bezier(0.19, 1, 0.22, 1)';
                            welcome.style.transform = 'translateY(-130px) scale(0.5)';
                            menu.style.display = 'block';
                            menu.style.opacity = '1';
                            const cards = document.querySelectorAll('.card');
                            cards.forEach((c, i) => {
                                setTimeout(() => { c.classList.add('slide-in'); }, i * 150);
                            });
                        }, 800);
                    }, 200);
                }, 3000);
            }, 1500);
        }
        window.onload = sequence;
    </script>
</body>
</html>
"""

if __name__ == '__main__':
    window = webview.create_window(
        'CORE CONTROL',
        html=html_layout,
        width=ww, height=wh, x=wx, y=wy,
        frameless=True, easy_drag=True,
        background_color='#000000'
    )
    webview.start()

Nasıl Kullanılır?

Bilgisayarınızda Python yüklü olmalı. Terminale pip install pywebview yazıp kütüphaneyi kurun, ardından kodu çalıştırın. Hepsi bu kadar.

Ufak bir teşekkür veya yorumunuzu eksik etmeyin, herkese iyi forumlar!

(Buraya loader'ın bir ekran görüntüsünü veya kısa bir klibini ekle kanka, çok fark eder)
ŞUNU DEĞİŞTİRSEYDİN BARİ by gemini

EzShop · 9 May 2026

Kordyss99 · 9 May 2026

c++ ye py konusu mantıklıymış

Eline sağlık bu arada

W1TCH · 9 May 2026

🌹 CHEATGLOBAL ÖZEL 🌹 🎀 Cg -UI Loader Base (Python) 🎀OPEN SOURCE

EsDeeKid1337

EsDeeKid?

Neler Ekledim?

Teknik Detaylar

Görüntü

Kaynak Kodu

Nasıl Kullanılır?

laangel

solo1337

Sampas15

Neler Ekledim?

Teknik Detaylar

Görüntü

Kaynak Kodu

Nasıl Kullanılır?

EzShop

Kordyss99

W1TCH

CheatGlobal.com

Şuanda konuyu görüntüleyen kullanıcılar

🌹 CHEATGLOBAL ÖZEL 🌹 🎀 Cg -UI Loader Base (Python) 🎀OPEN SOURCE

EsDeeKid1337

EsDeeKid?

Neler Ekledim?​

Teknik Detaylar​

Görüntü​

Kaynak Kodu​

Nasıl Kullanılır?​

laangel

solo1337

Sampas15

Neler Ekledim?​

Teknik Detaylar​

Görüntü​

Kaynak Kodu​

Nasıl Kullanılır?​

EzShop

Kordyss99

W1TCH

CheatGlobal.com

Şuanda konuyu görüntüleyen kullanıcılar

Neler Ekledim?

Teknik Detaylar

Görüntü

Kaynak Kodu

Nasıl Kullanılır?

Neler Ekledim?

Teknik Detaylar

Görüntü

Kaynak Kodu

Nasıl Kullanılır?