How To Make A Fivem Loading Screen

Written by Margaret Weigel
Updated at: 14 June 2025

Zaczynamy tworzenie własnego ekranu ładowania do FiveM. Będziesz potrzebował podstawowej wiedzy o HTML, CSS i JavaScript. Poświęć trochę czasu na zapoznanie się z tymi językami, jeśli jeszcze tego nie zrobiłeś.

Krok 1: Przygotowanie Środowiska

Stwórz nowy folder na swoim komputerze. Nazwij go, na przykład, "loading-screen". Wewnątrz tego folderu utwórz trzy pliki: index.html, style.css i script.js. To są podstawowe pliki, których będziemy używać.

Otwórz index.html w edytorze tekstu. Dodaj podstawową strukturę HTML. Zawiera ona znaczniki html, head i body. W sekcji head dodaj tytuł ekranu ładowania. Dodaj również linki do style.css i script.js.

Przykładowy Kod index.html


<!DOCTYPE html>
<html>
<head>
    <title>Ekran Ładowania FiveM</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
<script src="script.js"></script>
</html>

Krok 2: Tworzenie Interfejsu Użytkownika (HTML)

Zacznij od dodania elementów, które będą wyświetlane na ekranie ładowania. Dodaj obraz tła. Następnie dodaj pasek postępu. Dodaj również tekst informujący o statusie ładowania.

Umieść div o klasie "loading-container" wewnątrz body. Wewnątrz tego div umieść element img dla tła. Dodaj div o klasie "progress-bar". Następnie dodaj element p do wyświetlania tekstu statusu.

Przykładowy Kod HTML (wewnątrz <body></body>)


<div class="loading-container">
    <img src="background.jpg" alt="Tło">
    <div class="progress-bar"><div class="progress"></div></div>
    <p id="loading-text">Ładowanie...</p>
</div>

Krok 3: Stylizacja (CSS)

Otwórz style.css. Zdefiniuj style dla elementów HTML. Określ wygląd tła, paska postępu i tekstu. Użyj właściwości CSS, takich jak background-image, width, height, color i font-size.

Ustaw body tak, aby zajmował całą stronę. Ustaw loading-container na środek ekranu. Ostyluj progress-bar, aby był widoczny. Ostyluj element progress, aby reprezentował postęp.

Przykładowy Kod CSS


body {
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    background-color: #222;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading-container {
    position: relative;
    text-align: center;
}

.loading-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.progress-bar {
    width: 500px;
    height: 20px;
    background-color: #444;
    border-radius: 10px;
    margin: 20px auto;
    overflow: hidden;
}

.progress {
    height: 100%;
    width: 0%;
    background-color: #007bff;
    border-radius: 10px;
    transition: width 0.3s ease;
}

#loading-text {
    font-size: 1.5em;
}

Krok 4: Dodawanie Funkcjonalności (JavaScript)

Otwórz script.js. Dodaj kod JavaScript, aby zaktualizować pasek postępu i tekst. Użyj funkcji setInterval, aby regularnie aktualizować pasek. Zaktualizuj tekst statusu w zależności od postępu.

Pobierz elementy progress i loading-text z HTML. Ustaw początkowy postęp na 0. Użyj setInterval do inkrementacji postępu co 100 milisekund. Aktualizuj szerokość elementu progress. Aktualizuj tekst w elemencie loading-text.

Przykładowy Kod JavaScript


const progressBar = document.querySelector('.progress');
const loadingText = document.querySelector('#loading-text');

let progress = 0;

const interval = setInterval(() => {
    progress += 1;

    progressBar.style.width = `${progress}%`;
    loadingText.innerText = `Ładowanie... ${progress}%`;

    if (progress >= 100) {
        clearInterval(interval);
        loadingText.innerText = 'Gotowe!';
    }
}, 100);

Krok 5: Konfiguracja w FiveM

Umieść folder "loading-screen" w folderze resources na serwerze FiveM. Edytuj plik server.cfg. Dodaj linię "exec resources/[nazwa_twojego_folderu]/index.html". Upewnij się, że linia zaczyna się od "exec".

Dodaj również "start loading-screen" w pliku server.cfg. Upewnij się, że loading-screen jest uruchamiany po wszystkich zasobach, od których zależy. Zrestartuj serwer FiveM. Twój ekran ładowania powinien być teraz widoczny podczas łączenia się z serwerem.

Krok 6: Testowanie i Dostosowywanie

Po uruchomieniu serwera FiveM, połącz się z nim. Sprawdź, czy ekran ładowania działa poprawnie. Jeśli coś nie działa, sprawdź konsolę serwera pod kątem błędów. Dostosuj kod HTML, CSS i JavaScript, aby dopasować go do swoich potrzeb.

Możesz dodać animacje, efekty dźwiękowe i inne elementy interaktywne. Eksperymentuj z różnymi stylami i funkcjami. Stwórz unikalny ekran ładowania, który wyróżni Twój serwer.

Krok 7: Optymalizacja

Zoptymalizuj obraz tła. Użyj obrazu o odpowiedniej rozdzielczości. Skompresuj obraz, aby zmniejszyć jego rozmiar. Zmniejszenie rozmiaru obrazu przyspieszy ładowanie.

Użyj minifikacji dla plików CSS i JavaScript. Usuń niepotrzebne komentarze i spacje. Użyj narzędzi do minifikacji, aby zmniejszyć rozmiar plików. Mniejsze pliki przyspieszą ładowanie ekranu.