[Release] Sleek Loading Screen

Sleek FiveM Loading Screen

##Description
This resource shows your players a sleek loading screen using HTML/CSS/JS.
Texts and backgrounds are showed randomly.
Progress bar and progress infos :slight_smile:
Everything is editable in config.js file
This Loading Screen is responsive, it automatically fits to the size of the window

##Demo
video incoming
screenshot
TEXTS, BACKGROUNDS AND MUSICS ARE EDITABLE

##Installation

  • Download the resource by clicking on the download button and extract the archive
  • Rename the folder fivem-loading-sleek-xxxx to fivem-loading-sleek
  • In your citmp-server.yml file, add the resource:
    - fivem-loading-sleek

#questions

How to change something ?

All settings can be set in file config.js, wow it’s user friendly

Last update

v1.0-beta2: Added youtube integration
v1.1: Stable release

#download
Download always latest Release:
https://github.com/NicolasStr/fivem-loading-sleek/releases

8 Likes

How about a screenshot?

look at his github there is a picture

Screenshot uplaoded on post, but Video is coming today :slight_smile:

If the loading bar actually works… I’m down to give it a go - possibly replace the pics with a video from youtube or something :wink:

Thanks for the release!

@J_Sickness

This is a beta, but production ready release, loading bar has been tested only one time, don’t forget to give any feedback or telling me bugs

1 Like

Nice work… I just tested… It looks nice… although, sadly no loading bar on my end…

My only suggestion atm regarding the setup would be to move the upper right text down a bit as its getting covered by the FiveM logo

***as far as a video goes… i did the following modifications…
I removed the following from the config file:

var backgrounds = [
“img/bg1.jpg”,
“img/bg2.jpg”,
“img/bg3.jpg”
],

and added the following under the in the index file.

<iframe style="position: absolute; top: 0; left: 0;"
 src="https://www.youtube.com/embed/1VDe3xTJZuM?rel=0&amp;vq=hd1080&autoplay=1&controls=0&loop=1&playlist=1VDe3xTJZuM&showinfo=0" width="100%" height="100%" frameborder="0"></iframe>

Ill do a little more testing to see if i can get the loadingbar to work (when i get the time).
Thanks again for the share!

I will work on this tonight, thanks for feedback @J_Sickness

Updated:
v1.0-beta2: Added youtube integration

-> Configuration available, you can disable, enable, change youtube video etc…

(thx for @J_Sickness for yt intergation idea)

1 Like

Youtube video doesn’t play, it just pops up with the youtube play button which is unclickable

@WingedHussar It works for me,
You need just the video id, not the full link. For example: https://www.youtube.com/watch?v=yZJciVoBaRg , for this link, just copy the part after the v= and paste it into the script. In this case, yZJciVoBaRg is the id

1 Like

Oh I was copying the whole link :d Thanks it works now!

Thanks @tdchewy for support :smiley:

1 Like

Glad to help out. :slight_smile:

Updated:
v1.1: Stable release

What code to i change to have the background fix and not var? I have a picture that i want to use and it cycles between that 1 picture now.

I can’t get music to play.

Hi, I’m actually in holidays. Update will come later. I’ll be back on 5th Aug

Music isnt working,did as instructed.

question what size does the pictures gotta be for them to fit i tried to add my own