[Release] xnLoad | San Andreas inspired Loading Screen - Updated v2.0!

Here is a loading screen I quickly put together for my server. Thought I’d share it for everyone else.

It is inspired by the loading screen from GTA San Andreas.

I probably won’t be supporting this so do what you want with it. The images or music can be changed by replacing the files. Hasn’t been tested on anything other then 1080p resolution, but it’s all based on percentages so it should work fine.

Demo (Demo only views correctly in Google Chrome or in-game, image transitions don’t work on Microsoft Edge)

Download

3 Likes

Very nice loading screen. Works great.

Only problem is that the music cuts out rndomly after the 2-4th picture, but it no big deal as its just on my dev server.

I see you have a picture as the logo at the bottom left, i take it as its changeable right? along with the music?

Thanks again for the share.

-Liquid

Yeah you can change any image or the audio without problem. Not sure why the music cuts out, just a quirk with HTML audio. Sometimes the song will play the whole way through and sometimes it cuts out. Seems to always play through on Google Chrome so I’ll put it down to the FiveM Web Tools that are having some issues with it.

Any way to have the pictures be shown in a random order?

Yeah, line 24 of index.html change

bgImageArray[k]

to

bgImageArray[Math.floor((Math.random() * 9) + 1)]

Thanks for the quick response, Smallo! :slight_smile:

Only thing that is giving me a little trouble is the first screen that shows on the screen fades really fast and then the cycle returns to the normal speed. Are you seeing that?

Yeah I guess that’s something that will happen with the random function as there is a default image set. Can’t really stop there from being something there as it’s done in the CSS. I guess you could remove 1.jpg from line 7 of the kek.css and it’ll be a plain white screen for a split second. Or until line 7 you could add the below item onto a new line and that will give you a plain black screen for a split second. Will look better then a white background imo.

background: rgb(0,0,0);

That works, thanks for all the help, Smallo! :slight_smile: :yum:

I Love this loading screen, No isuess on our end, easy to use and edit.
Nice one!

  • KaasKoppie

Updated to Version 2.0.

Demo still available in the Original Post.

  • Added a Rules box (You can use it for anything really)
  • Added back the text up the top left so you can give people an idea of what your server is.
  • Background images now change randomly instead of in the same order.

Thats because it’s a website. They aren’t designed to be viewed locally. Either on a webserver or ingame. Espeically since it contains Javascript.

Crap! Sorry. I fixed an error. Just updated the GitHub. Only the index.html changed.

how do you add a discord image to the loading screen

Download link is broken?

Broken Link ???

update pls

broken link

Unlisted until download is fixed