[Release] z-loadscreen - A Pretty Decent Loading Screen

FiveM Releases
1

z-loadscreen: A Decent Looking Loading Screen.

z-loadscreen is a loading screen…

alt-text

Installation

  1. Download Here.
  2. Drag z-loadscreen folder into your resources folder.
  3. Add start z-loadscreen to your server.cfg.

Preview

Configuration

To Configure How-To
Footer text Config.js - Change the string under the object text and var link
Time to change to next image Config.js - Change the integer under imgInterval (in milliseconds)
Transition Time Length (how long the transition {fade} to next image lasts) Config.js - Change the integer under transitionInterval (in milliseconds)
YouTube Audio Presence Config.js - To have no music at all, make boolean var music false
YouTube Audio Config.js - To change the video, change the string videoID to your YouTube Video ID. What is a Video ID?
YouTube Audio Volume Config.js - To change the default audio volume, change the integer musicVolume ( 0-100: Higher is louder, Lower is more quiet )
Add/Remove Images Config.js __resource.lua - To add/remove images, make sure they are added in the images array (following sytax or else it will break) and also add them in your __resource.lua
Configurating Styling Attributes (simplified) How-To
Amount of Blur to Background Config.css - Change var –background-blur (Higher px: more intense blur)
Height of Loadbar Config.css - Change var –loadbar-height (Higher px: higher the loadbar)
Background Color (The color that the image fades out to) Config.css - Change var –fadeTo-Color (hash color) What is a Hash Color?

config.js

var config = {
    "transitionInterval": 1250,
    "imgInterval": 8000,
    "music": true,
    "videoID": "jo4-FhqkNwQ",
    "musicVolume": 70,
    "text": {
        "title": "My Arpee Server",
        "link": "discord.gg/yeet",
    },
    "images": ['bg0.png', 'bg1.png', 'bg2.png', 'bg3.png', 'bg4.png', 'bg5.png', 'bg6.png', 'bg7.png']
}

config.css

:root {
--background-contrast: 95%;
--background-blur: 3px;
--loadbar-color: #ffffff5b;
--loadbar-progress-color: #0000009f;
--loadbar-height: 27px;
--footer-font-color: #dfdfdf98;
--footer-font-size: 24px;
--fadeTo-Color: #222222;
}

What’s Configurable?

  • YouTube Video (audio) ID
  • Colors, Contrast, Blur, etc.
  • Images
  • Text instead of a server logo
  • Logo
  • Presence of Music
  • The Transition Intervals
  • Music Volume

Screenshots

Screenshots

alt-text
alt-text
alt-text

‘How-to Video’

Feedback would also be much appreciated.

New update thanks to the OP of this pr Logo/Text Config Option by How-Bout-No · Pull Request #1 · ThatZiv/z-loadscreen · GitHub

Logo -Text Config. (Pushed to separate branch)

  • Additional config for text is config.js
15 Likes
2

Awesome work man! :v::clap:

2 Likes
3

Clean and not too much stuff going on. Well done! :+1:

1 Like
4

cooool thanks for upload

5

The design of this is so elegant, love it! Any chance you’d be able to add in audio controls? Something minimal with just a pause and volume control for example would make this even better.

6

The screen gets frozen on this

image
image1920×1080 43.8 KB

Any idea why? i don’t hear the music i chose in the background… anything to do with it?

7

Make sure the video is not copyrighted, and check the dev console in chrome for the HTML to see if there are any errors, remember to add anything, you have to add it in the __resource.lua too

8

I appreciate the feedback, but at the time of finishing this loadscreen, I realized that it look very similar to
@Syntasu 's synn-loadscreen and adding that would give no originality from his and mine, maybe in the next update I’ll try to make something like that.

9

Yep i changed the songs and it works perfectly! i love that loading screen but… (there will always be a but.) the music is too loud. anyway to change that? i looked around the files couldn’t find an option.

10

As of now, there is no way to change the song. I’m working on adding a audio controller (in the config) though.

11

Ah yeah I see what you mean. But to be honest, I think the difference in design and obviously depending on the design of the UI, it would be different enough from Synns. I know myself and many others have also had issues with Synn’s regarding the black overlay which is sort of characteristic of his. In yours it is configurable so again another difference between them :smiley:

12

Essentially everything is configurable. But most of them didn’t even bother to look at the css :slight_smile:

13

I did actually look into the css @Syntasu , but knowing basically nothing about how to use and write it, all I could do was try to edit the box-shadow value in the body section which did absolutely nothing :frowning:

14

New Version

Added Music Volume Config

Check in new version on github (config.js)

15

You need to ADD DIRECTIONS to the post, very bad instruction, as a newbie this is very hard for me to do? :_ NOT HAPPY.image

1 Like
16

image
image719×234 10.8 KB

17

Those directions are very poorly written whoever wrote those directions were very badd of writing them there’s much more to it than just adding it in to the server CFG is there any way you can help me out as you have a discord I would appreciate it I’m new to fivem servers?

18

I mean, if you can’t follow those instructions maybe you shouldn’t run a server
¯_(ツ)_/¯ but my discord: Zua#9581

2 Likes
19

First of all you way out of line for saying that and im sure you were like that at one point, this isnt easy do instead of judging my intelligence why cant you be useful instead of backtalking SMH. The directions on the notepad are very poorly written my niece who is 7 years old can write better then that, its on notepad not word its hard to understand theres more to it then adding it to the servercfg, there should have been more directions then that.

20

ok bud