[FREE] Z - Loading Screen

FiveM Releases
, ,
1

✨ A modern, animated and highly customizable loading screen

FiveM NUI Standalone Config

zals
zals1920×1080 46.3 KB

Click to view video preview

image
image2534×1305 140 KB

✨ Features

🎯 Core

  • Full Loading Integration – Progress bar.
  • Multi-Tab Layout – Tabs for Team, Rules, and Gallery.
  • Autoplay Music – Toggleable music with animated equalizer.
  • Always-Visible UI Toggle – Hide UI while keeping a floating button to restore.
  • Particles + Parallax – Optional visual depth effects.

🖥️ UI/UX

  • Clean, responsive design – Looks great on all resolutions.
  • Left Gallery – Grid or auto slider (configurable).
  • Social Buttons – X, TikTok, Discord, Twitch, Instagram.
  • Team Cards – Photos, role, bio and clickable social links.
  • Rules as Cards – Beautiful and easy-to-read rule blocks.
  • Rotating Tips – Helpful tips above the progress bar.

🌈 Theming & Motion

  • 3 Theme Presets – Switch colors with activeStyle.
  • Live Color Variables – Colors applied via CSS variables.
  • Motion Controls – Configure amplitude/speed for logo, name and tabs.
  • Shimmers, floats, whooshes – Many tasteful animations.

🔧 Performance

  • Lightweight – Pure HTML/CSS/JS. No heavy frameworks.
  • Config Flags – Enable/disable particles, parallax, tips, etc.
  • SVG placeholders – Replace with your own media anytime.

⚙️ Configuration

Edit config.js placed next to index.html. No need to touch code.

Click to view config.js 
// Public configuration
window.ZLS_CONFIG = {
  styles: {
    style1: { name: 'Color 1', colors: { primary: '#ff4d5a', accent: '#ff385f', panel: '#151923', bg: '#0b0d12' } },
    style2: { name: 'Color 2', colors: { primary: '#2dd4bf', accent: '#38bdf8', panel: '#14202d', bg: '#0b1118' } },
    style3: { name: 'Color 3', colors: { primary: '#a78bfa', accent: '#f472b6', panel: '#1a1528', bg: '#0d0a1a' } }
  },
  activeStyle: 'style1',

  brand: { logo: 'assets/logo.svg', welcomeTag: 'WELCOME TO', serverName: 'Your Server RP' },

  socials: { x: '#', tiktok: '#', discord: '#', twitch: '#', instagram: '#' },

  // Left gallery (slider enabled by features.leftGallerySlider)
  gallery: [ 'assets/images/photo1.svg','assets/images/photo2.svg','assets/images/photo3.svg','assets/images/photo4.svg','assets/images/photo5.svg','assets/images/photo6.svg' ],

  // Team cards (links can be object or array + linkMap)
  team: [
    { name: 'Maria', age: '19', role: 'Owner', photo: 'assets/images/photo2.svg', bio: '...',
      links: { x: 'https://twitter.com/your', discord: 'https://discord.gg/your' } },
    { name: 'Matvey', age: '23', role: 'Developer', photo: 'assets/images/photo3.svg', bio: '...',
      links: ['x','instagram'], linkMap: { x: 'https://twitter.com/your', instagram: 'https://instagram.com/your' } }
  ],

  // Rules cards
  rules: [
    { title: 'Respect & Conduct', desc: 'No toxicity, racism or harassment.' },
    { title: 'No Cheats / Exploits', desc: 'Report bugs and do not abuse them.' },
    { title: 'Consistent Roleplay', desc: 'Avoid VDM/RDM and forced scenes.' },
    { title: 'Interaction & Fear of Life', desc: 'Focus on storytelling.' },
    { title: 'Staff Decisions', desc: 'Appeal later via official channels.' },
    { title: 'Discord Required', desc: 'Verification and full rules there.' }
  ],

  // Right tab gallery
  galleryTab: [ 'assets/images/photo1.svg','assets/images/photo2.svg','assets/images/photo3.svg','assets/images/photo4.svg','assets/images/photo5.svg','assets/images/photo6.svg' ],

  music: {
    enabledByDefault: true,
    sources: [ { src: 'assets/audio/music.ogg', type: 'audio/ogg' }, { src: 'assets/audio/music.mp3', type: 'audio/mpeg' } ],
    volume: 0.35
  },

  features: {
    particles: true,
    parallax: true,
    animatedTabs: true,
    showPercent: true,
    leftGallerySlider: true,
    tipsRotator: true,
    tabWhoosh: true
  },

  // Motion (amplitude/velocity for floating)
  motion: {
    logo: { amplitudePx: 6, durationSec: 5.5 },
    name: { amplitudePx: 3, durationSec: 6 },
    tabs: { amplitudePx: 3, durationSec: 7 }
  },

  tips: [ 'Be respectful and enjoy the story.', 'Use /report to contact staff.', 'Join our Discord for updates.' ],
  slider: { intervalMs: 3500 },

  labels: { tabTeam: 'Team', tabRules: 'Rules', tabGallery: 'Gallery', loadingAssets: 'ASSETS LOADING...', music: 'Music', hideUi: 'Hide the UI', showUi: 'Show UI' }
};

🛒 FREE Purchase

:shopping: Available now on Tebex:
:point_right: Click here to download Z-LoadingScreen on Tebex

More Scripts You Might Like

Code accessible Yes (config only, style, assets)
Subscription-based No
Approx. lines ~500
Requirements None
Support included Yes
3 Likes