Tailwind CSS Load Screen V2

FiveM Releases
, , ,
1

cover
cover1366Ɨ768 113 KB

Preview: Streamable

As suggested, here is version 2.0 of Simple Tailwind CSS Load Screen with some enhancements and improvements.

Credits

Features

  • Play embedded YouTube video
  • Play background slide images (check script.js, embedVideo)
  • Play multiple songs from URLs
  • Shows artists name
  • Shows albums name
  • Shows albums art
  • Keybind Tips Window
  • Animated Logo

Controls

  • Spacebar: Pause/Play music
  • Mouse Wheel: Volume Control
  • [ J ]: Toggles Tips Menu visibility
  • [ K ]: Toggles Music Player visibility
  • [ ā† ]: Previous song
  • [ ā†’ ]: Next song
  • [ ā†‘ ]: Volume Up
  • [ ā†“ ]: Volume Down
  • [ ,< ] : Previous Tip
  • [ .> ] : Next Tip

Github: Link

Instalation

  • Download fivem-loadingv2
  • Extract and copy to the resources folder
  • Add to the server.cfg ensure fivem-loadingv2
  • Edit the javascript file as you wish
  • Replace ./assets/logo.png
  • Add your backgrounds to ./assets/ folder and its name to the script.js file
4 Likes
2

bruuuuuuuuuuh looks amazinawesome :purple_heart:

1 Like
4

Of course! To add new buttons, you can use this social media buttons.

Note: When editing the buttons, make sure to import the library below in the of the HTML:

index.html 
<script src="https://cdn.tailwindcss.com"></script>

To disable shortcut tips, go to line 158 of the script and replace the original code with this:

script.js 
musicplayer.style.display = "block";
showtips.style.display = "none";

document.addEventListener("keydown", function (event) {
   if (event.code === "KeyK") {
      if (musicplayer.style.display === "block") {
         musicplayer.style.display = "none";
      } else {
         musicplayer.style.display = "block";
      }
   }
});
5

If I were to disable other things tho there isnā€™t like a enabled = true/false thing in the config?

6

why is my pc detecting trojan on the downloadā€¦
image

7

Iā€™m not sure. It seems that Windows Defender sometimes detects non-viruses as viruses, and fails to detect actual viruses. There is no obfuscated code. You can check everything yourself, or simply scan it using VirusTotal

1 Like
8

nicee

9

Unfortunately, no. You can only configure the ā€˜discordURLā€™, ā€˜embedVideoā€™ (true or false), ā€˜imagesNameā€™, ā€˜keybindsā€™ description, and ā€˜musicListā€™.

10

U mean to tell me you can have both stylish and No Cost all in 1 loading screen?!!! :heart_eyes::heart_eyes::heart_eyes::drooling_face:
Super cool and clean!

1 Like
11

Amazing work honestly, just sad with esx 1.9.1 theres that mouse issue with esx_identity where the mouse dissapears.

1 Like
12

Great work! Thank you for the release. I am having some issues with it and curious if you have any ideas how I may resolve this.
The loading screen just constantly loads. It will not load me into the server. I had no issues whatsoever before enabling the loading screen. Now it just perpetually loads. Any ideas where to start?
Thanks in advance.

1 Like
13

Iā€™m glad you liked it! I didnā€™t have this problem, but you can create a ā€œclient.luaā€ file in the root of the loadscreen resource and add it to your ā€œfxmanifest.luaā€ as below:

fxmanifest.lua 
client_script 'client.lua'
client.lua 
AddEventHandler('onClientResourceStart', function (resourceName)
	if(GetCurrentResourceName() ~= resourceName) then
		return
	end
	while GetIsLoadingScreenActive() do
		ShutdownLoadingScreen()
		Wait(100)
	end
end)
14

Thank you for your reply. I tried the message above and now It is crashing my game on load in. Thanks again for taking time to reply.

15

Iā€™m sorry it didnā€™t work. I tested the code Iā€™ve sent and it worked for me. I recommend updating your FiveM artifacts, delete your FiveM client and FXServer caches, and checking if there are any other loadscreens being loaded. Also, make sure your computer meets the minimum requirements to run GTA V.