[RELEASE] VLoadingscreen

[VisionDEV2]

Overview

This loading screen was created for my server however i thought i would share it to the public for use since it is actually quite a nice looking and functioning loading screen. Enhance your server with this interactive and unique UI design.

---

Key Features

Summary

Stunning Visuals

• Modern UI design
• Animated particle system with floating particles and connecting lines
• Glowing effects and gradient animations
• Fully responsive for all screen sizes

Multiple Pages

1. Showcase - Pure background view
2. Welcome - Server information with interactive info cards
3. Rules - Styled server rules with numbered list
4. Staff - Team showcase with role cards

Advanced Audio System

• Volume Slider: Smooth vertical slider with real-time adjustment
• Play/Pause Button: Control all audio sources at once
• Mute/Unmute: Toggle with visual feedback
• Supports background music + video audio simultaneously

Flexible Customization

• Logo Options: Choose between text logo (top) or custom image logo (center)
• Background Options: Static image, local video, YouTube embed or Link
• Easy Config: Single config.js file for all settings
• Content Editing: Simple HTML editing for all text and information

Screenshots

Summary

Showcase Page

Welcome Page

Rules Page

---

Configuration

Everything is configured in config.js Along with SOME configuration in the HTML files for the different page sections.

Config.js Preview

const CONFIG = {
    serverName: "VDEVELOPMENTS",
    
    // Logo Configuration
    // Options: 'text' or 'image'
    logoType: 'text',
    
    // For text logo (displays at top)
    // serverName will be used if logoType is 'text'
    
    // For image logo (displays in center of screen)
    logoImage: 'assets/logo.png', // Path to your logo file
    
    // Background Configuration
    // Options: 'image', 'video', or 'youtube'
    backgroundType: 'video',
    
    // For image background - PUT ``?w=1920`` on the end of your link
    backgroundImage:'  ',
    
    // For video background (local file or URL)
    backgroundVideo: ' ',
    backgroundVideoVolume: 0.3, // Initial volume for video (0.0 to 1.0) - can be adjusted with volume slider
    
    // For YouTube background (video ID only, e.g., 'dQw4w9WgXcQ')
    youtubeVideoId: '',
    
    // Music Configuration
    musicUrl: '', // Path to music file: 'assets/music.mp3' or leave empty to disable
    musicEnabled: true,
    
    // Particle Configuration
    particleCount: 80,
    particleColor: 'rgba(102, 126, 234, 0.5)',
};

Logo Options

• Text Logo: Displays your server name at the top
• Image Logo: Custom PNG logo in the center

Background Options

• Image: Static background image (URL or local)
• Video: Local video file with audio support
• YouTube: Embed any YouTube video

Audio Options

• Background music (MP3/WAV/OGG)
• Video audio (when using video background)
• Adjustable volume controls
• Mute functionality

---

Installation

1. Download and extract to your resources folder
2. Add ensure vloadingscreen to your server.cfg
3. Configure config.js with your settings
4. Edit content in index.html (Discord links, rules, staff)
5. Add your assets (logo, music, video) to assets/ folder
6. Restart your server

For more information refer to the ReadME on Github

Download It Here: Github
Or
VLoadingScreen.zip (10.4 KB)

Code is accessible	Yes
Subscription-based	No
Lines (approximately)	300+
Requirements	N/A
Support	Yes

[Archxn]

github link doesn’t work

[VisionDEV2]

Fixed