[Release]Gta Online loading screen

FiveM Resource Development & Modding Releases
1

Hello,
This is my first realease here on the fivem forum and I am starting with developing on FiveM.
I want to share with you guys my version of loading screen. It is based on GTA Online game loading screen.

This loading screen is design to be random and fully custom. You can customize what image are on the plate or in the background or the text that is on the plate. Plate that is on the background image is connected with the image and text All instructions how to setup this loading screen to yourself are in readme file on the github repo:

It has some styling bugs with the loading circle, because in the browser it behaves different than in game. Sometimes it works good in the game but sometimes it doesn’t

Some preview how this loading screen looks in game

2
21921×1075 791 KB
3
31913×1075 740 KB
1
11917×1061 815 KB

If you see any bug or something doesn’t work in your game you are welcome to tell me about it.

If you like this project you can leave me a star on my gitlab account

7 Likes
2

Looks nice, maybe you could just change the font a little

3

Yeah, that is a plan but I don’t have idea on font that is used orginally in the GTA online loading screen. So I added that one because it looks similar to the original font

4

Awesome one! How can I put more time between the slides? You can hardly read it.

5

I forgot to mention about it in the readme, sorry.
You have the config file and at the top there is a timeout variable that you need to change to whatever time you want. For example 1s - 1000 (this number you need to place to the timeout variable)

6

The GTA:O fonts are Pricedown and signpainter

1 Like
7

Thank you for this information. I was wondering if this font that you told me is also use in the original GTA:O loading screen, this text on the plates, or this gta online plates has another font style ?

8

where can i add the GTA:O font to? like where in the config can i change the font type?

9

The signpainter font is used un the personal menu, and in many others places (like the car’s plates, i think it’s the only font), the pricedown font is also used is many places, but I don’t have exemples.

@Code_5_Roleplay

  1. Add a font and create each classes via the css file like so:
/* Adding your font */
@font-face {
	font-family: "signpainter";
	src: url('fonts/SignPainter-HouseScript.ttf');
}
@font-face {
	font-family: "pricedown";
	src: url('fonts/pricedown.ttf');
}
/* Custom class that has the font */
.pricedown {
  font-family: 'pricedown';
  text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}

.signpainter {
  font-family: 'signpainter';
  text-shadow: 2px 2px 0 #000000, 4px 4px 0 #000000;
}

/* PS: The classes above already have the "GTA style" enjoy :)  */
  1. Add the fonts in the __resource.lua, just add them like another file.
files {
  'fonts/signpainter.ttf',
  'fonts/pricedown.ttf'
}

PS: Be careful with the uppercases because, if the loading screen is hosted and a Linux server, the file will not be recognized.

Hope it help you.

10

Thanks! It works!

11

It’s loading random right-img’s, how do I make it so that it loads the right image for the right text?

12

This loading screen has random background image but all the background image have connected plate with text and right image. Text and right images that display on the plate are stored in config file. Names of the config names variables are based on the array. First image in array is first definition variables.
I think I have explained it in readme file of this project.

If something is still confusing feel free to ask

13

This code add on Style.css?

14

Yes don’t forget to add the font files in the __resource.lua

1 Like
15

Hello, I don’t know if it’s still relevant, but in case, I wanted to know how to change the images on the loading screen, I can’t find a blank image and I can’t change it like that .

16

someone released one like this before, if anyone can find the link or have it downloaded please send.

17

if you are looking to add music to this you simply

  1. create a new folder inside your gtao-loadingscreen called (music)

  2. in your index html replace this

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Gta Online loading screen</title>
  <link rel="stylesheet" href="config.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

with this

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Gta Online loading screen</title>
  <link rel="stylesheet" href="config.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Add the audio tag for your music -->
  <audio src="music/music.mp3" autoplay loop></audio>
  1. in your __resource lua add another section so it looks like this
files {
  'index.html',

  'styles.css',
  'config.css',
  
  'config.js',
  'main.js',

  'images/load.png',
  'images/load2.png',
  'images/load17.png',
  'images/chop.png',
  'images/franklin.png',
  'images/franklin2.png',
  'images/franklin_a.png',
  'images/gtao.png',
  'images/images5.png',
  'images/images8.png',
  'images/images11.png',
  'images/load3.png',
  'images/load5.png',
  'images/load6.png',
  'images/load7.png',
  'images/load8.png',

  'img/right-img/right-img.png',
  'img/right-img/fleeca.png',
  'img/right-img/rockstar.png',
  'img/right-img/rockstar-logo.png',
  'img/right-img/boat.png',
  'img/right-img/cars.png',
  'img/right-img/heist.png',
  
  'music/music.mp3', -- Adjust this path to your music file
}

loadscreen 'index.html'