Simple Tailwind CSS Load Screen

Instalation

  • Download fivem-loading
  • Extract and copy to the resources folder
  • Add to the server.cfg ensure fivem-loading
  • Edit HTML and JS files as you wish
  • Replace dist/assets/logo.png
  • Replace dist/assets/music.mp3

Features

  • Reproduces YouTube embedded video
  • Reproduces audio source
  • Keybind Tips Window
  • Animated Logo
  • Volume Ranger Slider

Controls

  • Spacebar: Pause/Play music
  • Arrow Left/Right: Previous/Next Keybind Tip
  • Arrow Up/Down: Volume Control
  • Mouse Wheel: Volume Control
  • Escape: Hide/Show Keybind Tips Window

Preview: Streamable
Download: Github


Note: This was a learning project; I’m not a developer. And I am not fluent in the English language. So, if there are any errors in the description above or in the code, my apologies.


Code is accessible Yes
Subscription-based No
Lines (approximately) 200
Requirements N/A
Support Yes
4 Likes

nice, very good.

1 Like

An idea. Possibility to have more than one song queued up next to volume slider so someone can change the song they want during loading. Or is the volume tied into the video sound itself?

1 Like

Tailwind CSS Load Screen V2 - FiveM Resource Development & Modding / Releases - Cfx.re Community

How can i delete the menu on the loading screen? I dont want it but want that the keybindings still work

You can use this version without keybind tips menu: Release v0.9 · 0wn1/fivem-loading (github.com)