[RELEASE] [FREE] Animated Loading Screen - Customizable & Clean

FiveM Releases
, , , , , , ,
1

:cyclone: Animated Loading Screen - Customizable & Clean

Clean. Fast. Customizable. Built in 1 day because someone said it “wasn’t that hard.”

Now it’s free, and better than what they paid for.

Backstory

Someone recently reached out to hire me for a loading screen. They sent over a Figma mockup and asked how long it would take. I quoted 3 days.

They replied, “This could be done in a day,” and ghosted after I quoted a fair price.

So… I did it in 1 day anyway, just to prove a point.

This is the result, a fully animated, modern, configurable FiveM loading screen, now open to everyone. :smiling_face_with_sunglasses:

And I never stopped building it. The latest update adds two ways to make it your own without touching a config file.

Build It Your Way

Build with AI - describe your server in plain language (“dark red theme, my logo, add these rules”) and the assistant builds and edits the entire loading screen for you.

Build with AI screenshot

4zam_loading_ai_builder
4zam_loading_ai_builder1600×1000 209 KB

Config Builder - a no-code visual editor for every option. Customize it, then export a ready-to-run resource. Already have a setup? Import your config.json or a whole 4zam_loading zip and keep editing.

Config Builder screenshot

4zam_loading_config_builder
4zam_loading_config_builder1600×1000 219 KB

Features

  • Title Animations - animated presets with a sweeping sheen for your server name.

  • Video & YouTube Background Support - immersive full-screen visuals with smooth scaling and transitions.

  • Multiple Background Videos - a playlist with per-video titles and forward/back controls.

  • Video as Audio - let a background video drive the built-in player.

  • Gallery Lightbox - open an image and browse with on-screen arrows or the arrow keys.

  • Keyboard Overlay - show players the most important keybinds (LALT, RALT, SPACE, LCTRL, etc.).

  • Music Player - autoplay, volume, skip, and track info.

  • Easy JSON Config - or skip JSON entirely with the builder above.

How to Use

  1. Build and download your resource with the Config Builder, or grab the latest release: GitHub Release Page

  2. Drop the folder in your resources/ directory.

  3. Add this to your server.cfg:


ensure 4zam_loading
  1. Customize html/config.json as needed, or use the builder.

Previews

(Config Builder)

(Build with AI)

(Live Demo)

(Customization Documentation)

Loading screen screenshot

LoadingScreen
LoadingScreen2560×1305 322 KB

18 Likes
2

Nice work :100:

2 Likes
3

image
image1920×1080 17.6 KB

why black ?

4

Most likely a typo in your config double check to make sure

5

This is nice :+1:

1 Like
6

work now 100% thanks

1 Like
7

Hey, unfortunately, I’m not very familiar with JSON, HTML, and so on.
Is there a way to add a Tebex icon with a link to the social headers?

8

Sorry for the late reply, but I can look into adding this as a feature

1 Like
9

Failed to load config.json SyntaxError: Unexpected string in JSON at position 1939 (@gucci_loading/html/assets/index-B2Z5P4FH.js:40)

any help plz

10

hey i love this, but how do you change the logos that says, discord, insta, tiktok etc, i would love a option to put a tebex logo, or a my own website. appreciate your work

11

I’ve been messing around for a few hours and cant figure out how to properly get a video to show and play. There’s something within the json I’m not catching correctly. How do we do this?

12

Most likely a syntax error I recommend running your config file through a json checker

13

This is not yet available but may be in the future

14

Docs describe how to set this up

15

@4zam is there something wrong with the script? every video i use for youtube comes up with error 153, config error.
it was working then one day just stopped now no videos work at all

16

I will take another look at the youtube video implementation seems others are having issues as well. There is a current workaround in the github, but I will get a more robust fix in place soon.

17

Just pushed a new update that includes improvements for YouTube video error handling and adds support for custom icons in the social header section.

The documentation has also been updated with new guides and examples to make setup and customization even easier.

If you’re upgrading from an older version, make sure to follow the Upgrading Guide in the documentation to avoid any issues.

I’ve also added a Future Plans section so you can get an idea of what’s coming next.

Thanks for all the feedback, your support means a lot, and I hope you continue to enjoy using the loading screen!

18

Updated docs in new release might help with any issues you were having prior

19

This feature has been fully impemented

20

Sorry for the lateness, finally got some time to work on this, but this feature has not been implemented in the latest release