FiveM - Loading screens with music and progress bars (HTML, CSS, JS)

[Music] become a patreon gentleman today and receive a ton of perks including just school rose early access content private support channels code snippets and more join today at patreon.com jjs what does it carries my name is sue from java today we're gonna be we're gonna be making a load screen with that has a load bar and it'll have some background music so sorry about the background noise it's it's my fan like always so the link in the description will be for or it'll have the code that we write today all there in the description so let's get started with this what we're doing pretty much or how this works or how load screens work are it's just it's mainly front-end web development it's HTML CSS and some JavaScript so if you're familiar with front-end web development it just should be easy for you if you're not just try to follow along and see how this works because it's very customizable since it's with HTML and CSS so let's get started here I already created a folder called load screen that's what I'm going to call it so what I'm going to want to do is now I'm going to open this in Visual Studio whatever you want to use go ahead so I'm going to create my first file in that folder called score resource so there's my resource table in here and and I'm also gonna make a folder called HTML so in my resource table I'm gonna copy and paste the resource manifest version you can find that in the description I just I have it in this just because it's a little screen I don't know if you're supposed to have one but it's a good habit so we're all we're gonna need a load screen kind of thing here which will declare the HTML file for it so in the HTML folder we'll make we will make a full or a file called index.html I'll do that right after and let's do that right now index dot HTML that's there and then we're also gonna have a lot of other files so what I'm gonna do is have the files array their table and it'll have HTML / every everything in that folder that we have this asterisk right after the directory thing means it's gonna sort of like use all of the continues all the tape or use all the files in there any file or directory so everything in there so I'm gonna create another full or a file in my HTML folder now called index dots or now we're just going to call it named J s and we're also going to be creating a and named that CSS and yeah that's pretty much it so I'm also gonna need two files I'm gonna I don't even have them download but I'm gonna be down right now so I that's not it okay so what you're gonna want pretty much is a what's called a picture and also a it's called a mp3 file or I'm gonna be using an mp3 file so there's my picture I don't have to get my it's not letting you download it here I'll be right back okay so I got my mp3 file here you can use whatever file you want I think that's that oh that's compatible with HTML I'll show you what that means later but uh yeah so sorry about that and I didn't have that downloaded so uh yeah that's my bad so now what we're gonna want to do actually is to let's start writing the HTML file here so what I want to do is start off with the HTML tags and we're gonna have head tags because those are very important in this head tag we're gonna have a meta tag that has names equal to viewport this is a good for scaling this kind of keeps your page consistent so just copy is what I do with as equal to device so pretty much what you need that for is just scaling like I said ok so that's that and then we're gonna have to we're gonna be linking our style sheet right here our main debt CSS so I'm gonna do that right now so what we're gonna be writing a lot if I didn't mention that already I might have already but this is gonna be I feel like this is gonna be a long long video so Rho is equal just copy is what I do H ref equal to the main desk yes right there okay so we linked our main at CSS to this HTML file and now we're gonna have body tags with the ID Arnout class of background so I'll show you what we're gonna do with that class right now actually but pretty much let's go into our I'm gonna split this off right here there we go so I want a switch like that okay okay so this class we're gonna start off with I don't know why I wrote this I think we might need it but we're gonna need to give everything the need to give everything color of E which is just a white I don't remember why I did this I wrote this code a bit ago like a couple days ago I think so yeah and then we're gonna need the class background of a background color at least it's very customizable you do it you guys want to do but I'm just gonna make this Java theme so that color is kind of like our background color right here for Java so now our the page will be completely as you can see it's gonna be completely blank so yeah so now what I want to do is I don't know what I just clicked we're gonna have the div or we're gonna have the div with a container so it's gonna have a class of container and then we're gonna have the world will define container in a bit but we're gonna have image' SRC is equal to jetta that PNG that's just going to be giving us that little picture in we're gonna make it the picture in the middle of the screen to make it like an actual load screen so now I'm going to define container container is gonna have position fixed top percent 50% now if you're an actual if you know a lot about CSS the way I'm centering these these objects is very it's probably gonna make you mad but I'm doing this just because that's how I do it how this is how I Center things like in the complete middle of the screen so yeah this is how this is just gonna be centered so you'll see in a bit in fact I think yeah that's just gonna be in the middle of our screen right there so yeah now we got to do is we're gonna make we're gonna make I'm gonna make some comments here so this is the middle screen it's good to have comments by the way I think it's supposed to be on the bottom whatever and then on right here I'm gonna do is the audio or back background yeah okay and then what we want to do for audio is audio tag with controls loop we want to loop it autoplay so it plays automatically and it hidden so no one can see it and in here we're going on a source tag with oops SRC is equal to song mp3 and the type is equal to audio / mp3 now if you're using like a dot o GG then all you got to do is just make that old OGG and then like that but I'm just using the mp3 file format so that's what it's gonna be for me so yeah that should that should work now I'm gonna put this I don't know why I did that and I definitely spelled that wrong idea just to make it look better I guess okay now what we want to do we're gonna set up the load bar here the load bar the whole object behind it is kind of confusing and the JavaScript it doesn't really it's it's weird it's super weird and I don't I don't fully get it but I just the JavaScript part that we're gonna write soon I based it off of text loading screen which is from the CFX server data master I'll link it in the description if you want an example so yeah I'm gonna do I'm gonna do div hash load bar what this what this doing right here is just it makes it like that it's just a faster way of writing code I guess so the load bar has that value and then we need to give div oh these are classes oops oops okay that's awkward okay so I'm going to give Dux progressbar progress bar right inside of there and then we're also going to want to have the script of we want to link our main DJ s that we're gonna write soon we want to link that to this document so right now it should just be looking like the same because we need the progress bars we need to write the progress bars thing so I'm gonna hold off on the JavaScript part we needed we need to do the the load bar so the load bar and then we're also gonna need to declare or style the progress bar to I'm gonna do the progress bar first cuz it's smaller or it's shorter so I need to do with is 10% it's gonna be fixed on the bottom of our screen and you'll see how this works so I'm gonna have the background color oops I forgot a semicolon you have to have semicolons by the way when you're writing CSS or else it'll completely break as you just saw and I have my custom colors that I've already pre declared the Java colors and heights of pixels and position:absolute left 10 percent and yeah that's that's that supposed to be 20 pixels oops excuse me okay now the load bar it's a lot of stuff I don't even remember writing this so just copy I guess so with is gonna be 10% or now it's gonna be a hundred percent oops hundred percent this with right here it doesn't matter cuz it's gonna be manipulated by the main digest that we will write I promise you we're gonna write it so it doesn't we don't have to declare it but this has to be 100% because you'll see it's hard to explain and then we're gonna add a background color which is white again now I can I think I can explain to you guys we haven't made the code for the calls we haven't completely made the code to go on the bottom but I'm just saying that's the progress bar and then the the white that we're gonna have it'll be going across and you'll see so the width is gonna be just like that height it's gonna be the same height because we don't want it to look weird basically the same as a progress bar height now we're gonna have margin margin left these two pixels right three pixels I'm doing this off of how I wrote it merge is 5 pixels Jin is also 5 pixels so and then we also want to write overflow overflow hidden position is the position is fixed so we don't want to be manipulating nice to be left zero LCD right there bottom zero display let's see what it looks like so as you can see that's what I was looking for or that's what I was aiming for this is this white guy goes across the bottom is the what is it the load bar and then this will this red part will be manipulated by a JavaScript as it'll be our progress bar you can't hear the music by the way it only works in games I guess I don't know why is that but I think it's something to do with Chrome but uh so let's let's do the main j/s now here this is confusing so just follow along I I made there I kind of took tip this from this link right here I'll put it in the description this is what I base it off of so yeah so we have to make a bar count is equal to zero are this count is equal to zero and we have to we have to make a Const handlers which is gonna be a object that has a bunch of functions that will be handling the the event window dot add event listener it'll be listening for the message event when you're loading into the game the game itself will emit a bunch of messages for the load screen so we're gonna have to listen to these messages which in e and then that's the callback right there eat and then we'll be using Raman I first go do the handlers first so one of the handlers is or one of the events is start or whatever in its function or I hope I spelled that right okay and then we have to set count is equal to add a dot count okay then in its function function in poking data and then in here we're gonna do document dot query selector and then we're gonna get the class progress bar remember how I said we're gonna manipulates the progress bar this little red bit right here we're gonna do that here so progress bar dot to style your left is equal to zero percent this is not it this isn't a string zero percent here I'm gonna I'm gonna close out just you can see so it'll be zero percent oops I don't know what what just happened here I get I just get to be style I don't know what happened there but uh yeah oh there has to be commas here too I'm really out of it okay so that'll give it zero percent and then you have to write this again but for the width so I'm just gonna copy it because I'm lazy with with and then is equal to that I DX I have no idea what that is / count times 100 and then we have to add the string or with add percent again because CSS will take percents or we're gonna be using percents for this now we have to do start data file same thing and after that I keep forgetting the commas I don't really write JavaScript like this ever so that's a little not used to writing it like that but you know the last one is perform function yeah and then this count get to be giving it plus one which is what that is and then we have two I'm gonna copy this again here style and then this was the exact same thing so the first part like that and then the width this time will be equal to instead of debt about idx it'll be this times 100 plus percent because you need to be in a string with percent so we're doing CSS so now we have to kind of bind this to this variable or all of these to this very large we're gonna be using this variable and we're gonna be binding it with the event so when these events do happen we'll be good so it'll would have to do in parentheses Handler and e dot data dot event name we have to do or function oops this gets confusing and I'm a dot data so just like that that's well it'll do I'm gonna go load this up and yeah I'll see you guys in game or at least in the menus okay so I'm in the in the game now I'm gonna click localhost I'm gonna join my server and there we go yeah I just put on my headphones and I hear the audio now and this is just a simple little load screen you can see the progress will bar working - I think this is loud I'm gonna turn it down here and yeah it's just it's it's you know it's doing this thing it's it's a very simple load screen but you know the possibilities are endless because it's HTML so if you have any ideas let me know for next videos and if you do make a little screen you can tweet it at our Twitter at Java Jess I'm curious to see what you guys can make and yeah sorry for not uploading once again yeah so you guys for watching and I'll see you later

Channel: Jeva

Views: 78,141

Keywords: Fivem, zua, fivem scripting, fivem coding, fivem lua, how to code, lua, gta v modding, gta v scripting, gta 5 scripting, gta 5 modding, fivem roleplay, fivem rp

Id: c4q8IN1IbLk

Length: 23min 1sec (1381 seconds)

Published: Sun Nov 17 2019