Loading screen does not work in fivem (html, css)

FiveM Resource Development & Modding Discussion
1

Hey, im trying to make loading screen. I want to add backround video called video.mp4 and look, it is working in html live preview, i have also added the video.mp4 to fxmanifest, but it refuse to work in fivem.

Here is html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>ww2 Alpha-0.0.1</title>
</head>
<body>
    <div class="backround">
        <video autoplay loop muted id="myVideo">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="container">
        <div class="logo"><img src="logo.png" alt="Logo"></div>
        <div class="loading-state">WW2</div>
        <div class="loading-bar">
            <div class="loading-progress-bar"></div>
        </div>    
    </div>
    <script src="script.js"></script>
</body>
</html>

here is css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --accent-color: #ff0000;
    --background: #000;
    --light-text: #aaa;
    --loading-bg: #111;
    --transition: 1s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    user-select: none;
}

.backround {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure the video is behind everything */
}

#myVideo {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -2; /* Ensure the video is behind everything */
}

.container {
    position: relative; /* Ensure child elements are positioned relative to this */
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column; /* To stack elements vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
}

.logo img {
    width: 15vw;
}

.loading-state {
    position: absolute;
    bottom: 15vh;
    color: var(--light-text);
    font-weight: 300;
    font-size: 0.85em;
}

.loading-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 1vh;
    background: var(--loading-bg);
}

.loading-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: var(--accent-color);
    transition: var(--transition);
}

help please :frowning:

2

Show fxmanifest

3 
fx_version 'cerulean'
game 'gta5'
lua54 'yes'

loadscreen 'nui/index.html'
loadscreen_manual_shutdown "yes"

client_script 'client.lua'

files {
    'nui/logo.png',
    'nui/index.html',
    'nui/style.css',
    'nui/script.js',
    'nui/video.mp4'
}
4

can i see your script.js?

and pls try .container is display none and background display absoluty

5

here is script.js

let loadingProgressBar = document.querySelector('.loading-progress-bar')
let loadingState = document.querySelector('.loading-state')

window.addEventListener('message', function(e) {
    if(e.data.eventName === 'loadProgress') {
        loadingProgressBar.style.width = parseInt(e.data.loadFraction * 100) + "%"
    } else if(e.data.eventName == "onLogLine") {
        loadingState.innerHTML = e.data.message
    } else if(e.data.eventName === "initFunctionInvoked") {
        loadingState.innerHTML = "Loading " + e.data.name        
    }
});

and could you tell me how do i set this backround display please?

6

you should find .container in css and write display:none; after that you need a find .background and set display absoluty not the fixed. can you try that?

7

i tried but it didnt worked correctly. there was no backround and no logo in centre.