Loadscreen v2
Clean and fully configurable loading screen for FiveM.
Key Features
Multiple Loading Bars
The loading screen features a main loading bar representing the % of total
loading done, and a secondary loading bar representing the % of the current
step done. The secondary loading bar is disabled by default.
Background Media
The loading screen features optional configurable background images, music,
and video.
No Bridge
The loading screen shows up until the character spawns or until another
resource shuts it down, depending on the configuration.
Multiple Styles
The loading screen comes with 3 styles by default:
- Classic: the style provided since v1.0.0;
- Modern: a modernized layout;
- Minimal: everything is condensed and centered (default).
The config can switch between these 3. Alternatively, you may create your own
CSS style and use it in the config instead.
Fully Configurable
This loading screen offers a huge amount of options to enable you to configure
it for your server to a T.
Configuration
Configuration is handled through convars.
See loadscreen.cfg for examples & explanations.
13 Likes
2.0.0 - 2024-07-21
view diff
Thanks a lot to @uyuyorum for contributing to the slight re-design of this version!
Added
- Automatic usage of assets (images, music, videos).
- Convar to toggle usage of music.
- Convar to switch between the available backgrounds (css, images, videos).
- Convars for shuffling music & videos.
- Convar for letting external resources handle the loadscreen shutdown.
- Shutdown when spawnmanager isn’t available, and
externalShutdown is false.
- Error log to easily see & copy errors when they happen in the NUI.
- Convars for toggling various parts of the loading screen on/off.
- Option for displaying a logo.
- Convars for changing the screen colors & CSS background.
- Convar option for setting a custom font family.
- Convar option for setting the background brightness.
- Dev menu when the screen is opened in regular browsers.
- Generated CFG output to the dev menu.
- GitHub pages deployment (link).
- Default background video.
- Background embed option.
Changed
- Simplified music & video code.
- Reduced the loading bars’ widths in the classic style.
- Moved the config from a JS file to FiveM convars.
- Rounded the loading bars’ borders.
- Replaced the default audio controls with a cleaner version that also controls the background video’s volume.
- Reduced padding from some sides of the screen in classic and modern styles for consistency.
- Disabled users being able to select text & drag images.
- Refactored the internal code.
- Reformatted and typechecked the JS code.
- Added GitHub workflows for testing the code and for publishing a GitHub release.
- Added issue templates and a code of conduct for GitHub.
- Reorganized the HTML.
- Refactored some of the JS code.
- Moved some type declarations into separate files.
- Organized handovers.
Removed
- Semantic versioning note in the changelog - this resource doesn’t have an API.
- Config option for specifying assets - they are now automatically detected.
- Better shutdown for specific resources - use the new convar option.
- Minimal style hiding the secondary bar - this is now handled through convars.
2 Likes
