Preloader Settings

Overview

The Preloader Settings module provides a comprehensive interface for customizing the page loading animation that appears during page transitions and AJAX requests. This visual feedback system enhances user experience by providing clear indication that content is loading, preventing confusion during navigation, and adding a professional polish to your website.

The Preloader system offers extensive customization options including 17 different animation styles, color schemes for both light and dark modes, timing controls, and behavior settings. You can configure when the Preloader appears (page navigation, AJAX requests), how long it displays, and how it looks with various sizes, colors, and animation types. All settings are managed through a user-friendly admin interface organized into logical sections.

Use this module to create a branded loading experience that matches your website's design, improves perceived performance, and provides consistent visual feedback across all page interactions.

Accessing Preloader Settings

Navigation path: Dashboard > Appearance > Preloader Settings

Required permission: system.settings

Key Features

• Enable/Disable Toggle: Quickly turn Preloader on or off without losing settings
• 17 Preloader Types: Choose from spinners, dots, bars, pulses, and more
• Size Options: Select from small, medium, large, or extra-large sizes
• Color Customization: Set custom colors for Preloader, background, and text
• Dark Mode Support: Separate color schemes for dark mode theme
• Loading Text: Optional text message with customizable color
• Timing Controls: Configure minimum display time and fade duration
• Behavior Settings: Control when Preloader appears (navigation, AJAX, both)
• Z-Index Control: Adjust layering to ensure Preloader appears above content
• Theme-Aware Design: Automatically adapts to light and dark modes
• Real-time Preview: Visual reference of all 17 Preloader types
• Organized Interface: Settings grouped into logical sections
• Performance Optimized: Hardware-accelerated CSS animations

Main Interface

Settings Page Layout

The Preloader Settings page is organized into five main sections, each presented in a distinct card with color-coded headers:

1. General Appearance (Saffron/Orange gradient with vertical bar)

   • Preloader enabled toggle, type, size, and colors

2. Loading Text (Blue gradient with vertical bar)

   • Text display toggle, message content, and text color

3. Behavior & Timing (Green gradient with vertical bar)

   • Display duration, fade animation, and trigger settings

4. Dark Mode Styling (Indigo gradient with vertical bar)

   • Colors specifically for dark mode theme

5. Available Preloader Types (Amber gradient with vertical bar)

   • Visual reference grid showing all 17 Preloader animation styles

Each section includes:

• Clear section headers with descriptive icons
• Organized input fields with labels and help text
• Informational banners explaining key concepts
• Color-coded badges for Preloader type categories
• Preview and save buttons at the top and bottom

Actions Available

• Enable/Disable Preloader: Toggle Preloader visibility site-wide
• Select Preloader Type: Choose from 17 animation styles
• Set Size: Adjust Preloader dimensions (small to extra-large)
• Customize Colors: Set colors for Preloader, background, and text
• Configure Text: Add optional loading message
• Set Timing: Control minimum display time and fade duration
• Choose Triggers: Select when Preloader appears (navigation, AJAX, both)
• Adjust Z-Index: Control layering order
• Configure Dark Mode: Set separate colors for dark theme
• Preview Site: Open homepage in new tab to test Preloader
• Save Settings: Update all modifications at once
• Cancel: Discard changes and return to dashboard

Common Tasks

Task 1: Enabling the Page Preloader

Activate the loading animation for your website:

1. Navigate to Dashboard > Appearance > Preloader Settings
2. In the General Appearance section, locate "Enable Preloader"
3. Toggle the switch to ON (switch turns gradient orange)
4. The default settings are already configured:
   • Type: Bouncing Dots
   • Size: Medium
   • Color: Primary theme color
5. Click "Preview Site" in the top-right to test on homepage
6. Click "Save Preloader Settings" at the bottom

Result: A loading animation appears during page transitions and AJAX requests.

Note: The Preloader uses sensible defaults, so you can enable it immediately without additional configuration.

Task 2: Choosing a Different Preloader Animation

Select from 17 available animation styles:

1. Go to Dashboard > Appearance > Preloader Settings
2. In the General Appearance section, find "Preloader Type" dropdown
3. Click the dropdown to see all options organized by category:
   • Basic Spinners: spinning-circle, ring, spinner, dual-ring
   • Dot Animations: dots, bouncing-dots, orbiting-dots
   • Bar & Shape Preloaders: bars, rotating-squares, progress-bar
   • Pulse & Wave: pulse, pulsing-ring, wave, bounce
   • Advanced: gradient-spinner, spinner-text, flip-card
4. Select your preferred animation type
5. Scroll down to "Available Preloader Types" section to see visual examples
6. Click "Preview Site" to test the animation
7. Click "Save Preloader Settings"

Result: The selected animation style is used for all loading states.

Recommendations:

• spinning-circle or ring: Professional, minimal
• bouncing-dots: Playful, modern (default)
• gradient-spinner: Colorful, eye-catching
• progress-bar: Shows actual progress
• pulse: Subtle, non-intrusive

Task 3: Customizing Preloader Colors

Match the Preloader to your brand colors:

1. Navigate to Dashboard > Appearance > Preloader Settings

2. In the General Appearance section, locate the color fields:

   Preloader Color:

   • Click the color picker input
   • Select your brand's primary color
   • Or enter hex code (e.g., #FF6B35)

   Background Color:

   • Click the color picker
   • Choose a semi-transparent overlay color
   • Recommended: rgba(255, 255, 255, 0.9) for light backgrounds

3. Scroll to Dark Mode Styling section

4. Set colors for dark mode:

   • Dark Mode Preloader Color: Lighter, more vibrant version
   • Dark Mode Background: Dark overlay (e.g., rgba(0, 0, 0, 0.9))

5. Click "Preview Site" and toggle dark mode to test both

6. Click "Save Preloader Settings"

Result: Preloader displays with your custom colors in both light and dark modes.

Tips:

• Use high contrast colors for visibility
• Test on both light and dark backgrounds
• Keep background semi-transparent (0.8-0.95 opacity)
• Ensure colors are accessible (WCAG compliant)

Task 4: Adding Loading Text Message

Display a custom message during loading:

1. Go to Dashboard > Appearance > Preloader Settings
2. In the Loading Text section, find "Show Loading Text"
3. Toggle the switch to ON
4. In "Loading Text" field, enter your message:
   • Examples: "Loading...", "Please wait...", "Getting things ready..."
   • Keep it short (2-4 words)
5. Optionally, customize "Loading Text Color":
   • Click color picker
   • Choose a color that contrasts with background
6. For dark mode, set "Dark Mode Text Color" in the Dark Mode section
7. Click "Preview Site" to see the text with Preloader
8. Click "Save Preloader Settings"

Result: Your custom text appears below the Preloader animation.

Best Practices:

• Keep text concise and friendly
• Use ellipsis (...) to indicate ongoing action
• Ensure text color has sufficient contrast
• Test readability on both light and dark backgrounds
• Consider internationalization if serving multiple languages

Task 5: Configuring Preloader Timing

Control how long the Preloader displays:

1. Navigate to Dashboard > Appearance > Preloader Settings
2. In the Behavior & Timing section, read the info banner explaining timing settings
3. Configure "Minimum Display Time":
   • Default: 500 milliseconds (0.5 seconds)
   • Recommended range: 300-1000ms
   • Purpose: Prevents flickering on fast connections
   • Example: Set to 800ms for smoother experience
4. Configure "Fade Duration":
   • Default: 300 milliseconds (0.3 seconds)
   • Recommended range: 200-500ms
   • Purpose: Smooth fade-out animation
   • Example: Set to 400ms for slower, more elegant fade
5. Click "Save Preloader Settings"

Result: Preloader displays for at least the minimum time and fades out smoothly.

Understanding Timing:

• Min Display Time: Even if content loads in 100ms, Preloader shows for full minimum time
• Fade Duration: Time taken for Preloader to fade out after content is ready
• Total Time: Minimum display time + fade duration = shortest possible Preloader visibility

Recommendations:

• Fast sites: 300-500ms minimum, 200-300ms fade
• Average sites: 500-800ms minimum, 300-400ms fade
• Slow sites: 800-1000ms minimum, 400-500ms fade

Task 6: Controlling When Preloader Appears

Choose which actions trigger the Preloader:

1. Go to Dashboard > Appearance > Preloader Settings

2. In the Behavior & Timing section, find the trigger toggles:

   Show on Navigation:

   • Toggle ON: Preloader appears during page transitions
   • Toggle OFF: No Preloader when navigating between pages
   • Recommended: Keep ON for better UX

   Show on AJAX:

   • Toggle ON: Preloader appears during AJAX requests
   • Toggle OFF: No Preloader for background requests
   • Recommended: Keep ON for form submissions, data loading

3. You can enable both, one, or neither:

   • Both ON: Comprehensive loading feedback (recommended)
   • Navigation only: Traditional page load indicator
   • AJAX only: Background operations only
   • Both OFF: Disables Preloader entirely (not recommended)

4. Click "Save Preloader Settings"

Result: Preloader appears only for the selected trigger types.

Use Cases:

• Both enabled: Best for most websites, complete feedback
• Navigation only: Single-page apps with custom AJAX indicators
• AJAX only: Sites with custom page transition animations
• Both disabled: When using alternative loading indicators

Task 7: Adjusting Preloader Size

Change the dimensions of the Preloader animation:

1. Navigate to Dashboard > Appearance > Preloader Settings
2. In the General Appearance section, find "Preloader Size" dropdown
3. Select from four size options:
   • Small (sm): Compact, subtle (32px)
   • Medium (md): Standard size (48px) - default
   • Large (lg): Prominent (64px)
   • Extra Large (xl): Maximum visibility (80px)
4. Consider your use case:
   • Small: Inline loading, subtle feedback
   • Medium: General purpose, balanced
   • Large: Important operations, full-page loads
   • Extra Large: Splash screens, initial app load
5. Click "Preview Site" to see the size in context
6. Click "Save Preloader Settings"

Result: Preloader displays at the selected size.

Recommendations:

• Small: Mobile apps, inline content loading
• Medium: Most websites, default choice
• Large: E-commerce checkouts, form submissions
• Extra Large: Landing pages, app initialization

Note: Size affects both the animation and any loading text below it.

Task 8: Setting Up Dark Mode Colors

Configure separate colors for dark theme:

1. Go to Dashboard > Appearance > Preloader Settings

2. Scroll to the Dark Mode Styling section

3. Read the info banner about dark mode color recommendations

4. Configure three color settings:

   Dark Mode Preloader Color:

   • Use lighter, more vibrant colors than light mode
   • Example: If light mode uses #FF6B35, try #FF8C5A
   • Ensures visibility on dark backgrounds

   Dark Mode Background:

   • Use dark, semi-transparent overlay
   • Example: rgba(0, 0, 0, 0.9) or rgba(17, 24, 39, 0.95)
   • Provides contrast for Preloader

   Dark Mode Text Color:

   • Use light colors for readability
   • Example: #F3F4F6 or #E5E7EB
   • Ensure sufficient contrast with background

5. Click "Preview Site" in new tab

6. Toggle dark mode in the preview to test colors

7. Adjust colors if needed for better visibility

8. Click "Save Preloader Settings"

Result: Preloader automatically uses dark mode colors when theme is dark.

Best Practices:

• Test both themes before publishing
• Use color contrast checkers for accessibility
• Keep dark mode colors slightly brighter than light mode
• Maintain brand consistency across both themes
• Consider user preferences and system settings

Settings and Options

General Appearance Settings

Enable Preloader (Preloader_enabled)

• Type: Toggle switch
• Required: No
• Default: Enabled (ON)
• Description: Master control to show or hide Preloader site-wide
• Values:
  • ON (1): Preloader appears during page transitions and AJAX requests
  • OFF (0): Preloader is completely hidden, settings are preserved
• Note: Disabling preserves all settings for future use

Preloader Type (Preloader_type)

• Type: Dropdown select
• Required: Yes
• Default: "bouncing-dots"
• Description: Animation style for the Preloader
• Options (17 total):
  • Basic Spinners: spinning-circle, ring, spinner, dual-ring
  • Dot Animations: dots, bouncing-dots, orbiting-dots
  • Bar & Shape Preloaders: bars, rotating-squares, progress-bar
  • Pulse & Wave: pulse, pulsing-ring, wave, bounce
  • Advanced: gradient-spinner, spinner-text, flip-card
• Display: Visual reference grid available in settings page
• Performance: All animations use CSS transitions (hardware accelerated)

Preloader Size (Preloader_size)

• Type: Dropdown select
• Required: Yes
• Default: "md" (Medium)
• Description: Dimensions of the Preloader animation
• Options:
  • sm (Small): 32px, compact and subtle
  • md (Medium): 48px, standard size
  • lg (Large): 64px, prominent
  • xl (Extra Large): 80px, maximum visibility
• Note: Size affects both animation and text spacing

Preloader Color (Preloader_color)

• Type: Color picker
• Required: Yes
• Default: Primary theme color
• Format: Hex color code (e.g., #FF6B35)
• Description: Main color of the Preloader animation in light mode
• Display: Used for spinner, dots, bars, or other animated elements
• Recommendation: Use brand primary color for consistency

Background Color (Preloader_background_color)

• Type: Color picker
• Required: Yes
• Default: rgba(255, 255, 255, 0.9)
• Format: Hex or RGBA color code
• Description: Semi-transparent overlay behind Preloader in light mode
• Purpose: Provides contrast and focuses attention on Preloader
• Recommendation: Use semi-transparent white (0.8-0.95 opacity)

Loading Text Settings

Show Loading Text (Preloader_show_text)

• Type: Toggle switch
• Required: No
• Default: Disabled (OFF)
• Description: Display text message below Preloader animation
• Values:
  • ON (1): Text appears below Preloader
  • OFF (0): Preloader only, no text
• Note: Text color is customizable separately

Loading Text (Preloader_text)

• Type: Text input
• Required: Only if Show Loading Text is ON
• Max Length: 255 characters
• Default: "Loading..."
• Description: Message displayed below Preloader animation
• Examples: "Loading...", "Please wait...", "Getting things ready..."
• Recommendation: Keep concise (2-4 words) with ellipsis

Loading Text Color (Preloader_text_color)

• Type: Color picker
• Required: Only if Show Loading Text is ON
• Default: #374151 (gray)
• Format: Hex color code
• Description: Color of loading text in light mode
• Recommendation: Ensure sufficient contrast with background

Behavior & Timing Settings

Minimum Display Time (Preloader_min_display_time)

• Type: Number input
• Required: Yes
• Default: 500 (milliseconds)
• Min: 0
• Max: 5000
• Unit: Milliseconds (1000ms = 1 second)
• Description: Minimum time Preloader stays visible, even if content loads faster
• Purpose: Prevents flickering on fast connections
• Recommendations:
  • Fast sites: 300-500ms
  • Average sites: 500-800ms
  • Slow sites: 800-1000ms
• Note: Set to 0 to hide immediately when content loads (may cause flicker)

Fade Duration (Preloader_fade_duration)

• Type: Number input
• Required: Yes
• Default: 300 (milliseconds)
• Min: 0
• Max: 2000
• Unit: Milliseconds
• Description: Time taken for fade-out animation when hiding Preloader
• Purpose: Smooth transition from Preloader to content
• Recommendations:
  • Quick fade: 200-300ms
  • Standard fade: 300-400ms
  • Slow fade: 400-500ms
• Note: Longer durations feel more elegant but delay content visibility

Show on Navigation (Preloader_show_on_navigation)

• Type: Toggle switch
• Required: No
• Default: Enabled (ON)
• Description: Display Preloader during page transitions
• Values:
  • ON (1): Preloader appears when navigating between pages
  • OFF (0): No Preloader for page navigation
• Recommendation: Keep enabled for better user experience

Show on AJAX (Preloader_show_on_ajax)

• Type: Toggle switch
• Required: No
• Default: Enabled (ON)
• Description: Display Preloader during AJAX requests
• Values:
  • ON (1): Preloader appears during background requests
  • OFF (0): No Preloader for AJAX operations
• Use Cases: Form submissions, data loading, dynamic content updates
• Recommendation: Keep enabled for comprehensive feedback

Z-Index (Preloader_z_index)

• Type: Number input
• Required: Yes
• Default: 9999
• Min: 0
• Max: 999999
• Description: Stacking order to ensure Preloader appears above other elements
• Purpose: Prevents content from appearing over Preloader
• Recommendations:
  • Standard: 9999 (works for most sites)
  • High: 99999 (if you have high z-index modals)
  • Maximum: 999999 (if absolutely necessary)
• Note: Only increase if Preloader appears behind other elements

Dark Mode Styling Settings

Dark Mode Preloader Color (Preloader_dark_mode_color)

• Type: Color picker
• Required: Yes
• Default: Lighter version of Preloader_color
• Format: Hex color code
• Description: Main color of Preloader animation in dark mode
• Purpose: Ensures visibility on dark backgrounds
• Recommendation: Use lighter, more vibrant colors than light mode
• Example: If light mode is #FF6B35, try #FF8C5A for dark mode

Dark Mode Background (Preloader_dark_mode_background)

• Type: Color picker
• Required: Yes
• Default: rgba(0, 0, 0, 0.9)
• Format: Hex or RGBA color code
• Description: Semi-transparent overlay behind Preloader in dark mode
• Purpose: Provides contrast for Preloader on dark theme
• Recommendation: Use semi-transparent black or dark gray (0.8-0.95 opacity)
• Example: rgba(17, 24, 39, 0.95) for subtle dark overlay

Dark Mode Text Color (Preloader_dark_mode_text_color)

• Type: Color picker
• Required: Only if Show Loading Text is ON
• Default: #F3F4F6 (light gray)
• Format: Hex color code
• Description: Color of loading text in dark mode
• Purpose: Ensures text readability on dark background
• Recommendation: Use light colors (#E5E7EB, #F3F4F6, #FFFFFF)
• Accessibility: Ensure WCAG AA contrast ratio (4.5:1 minimum)

Permissions

The Preloader Settings module uses the following permission:

• system.settings: Can view and edit Preloader settings

Note: This permission is shared with other system configuration modules. Users with this permission can access general settings, mail configuration, and other system-level settings.

Available Preloader Types Reference

The system includes 17 professionally designed Preloader animations, organized into categories:

Basic Spinners

• spinning-circle: Classic circular spinner, minimal and professional
• ring: Ring-shaped spinner with rotating segment
• spinner: Simple rotating spinner, lightweight
• dual-ring: Two concentric rings rotating in opposite directions

Dot Animations

• dots: Three dots with sequential fade animation
• bouncing-dots: Three dots bouncing up and down (default)
• orbiting-dots: Dots rotating in circular orbit

Bar & Shape Preloaders

• bars: Vertical bars with wave animation
• rotating-squares: Square shapes rotating and scaling
• progress-bar: Horizontal progress bar with indeterminate animation

Pulse & Wave

• pulse: Pulsing circle with scale animation
• pulsing-ring: Ring with pulsing opacity effect
• wave: Wave-like motion animation
• bounce: Bouncing ball animation

Advanced

• gradient-spinner: Spinner with gradient color effect
• spinner-text: Spinner combined with text label
• flip-card: 3D flip card animation

Note: All Preloader types respect your color and size settings. The visual reference grid in the settings page shows examples of each type.

Tips and Best Practices

• Enable by Default: Keep Preloader enabled for better user experience
• Choose Appropriate Type: Match Preloader style to your brand personality
• Optimize Timing: Balance between preventing flicker and not delaying content
• Test Both Themes: Verify Preloader visibility in light and dark modes
• Use Brand Colors: Maintain consistency with your color scheme
• Keep Text Short: If using text, limit to 2-4 words
• Consider Performance: All Preloaders are optimized, but simpler is faster
• Test on Mobile: Ensure Preloader is visible and appropriately sized
• Accessibility: Ensure sufficient color contrast (WCAG AA minimum)
• Minimum Display Time: Set to at least 300ms to prevent flicker
• Fade Duration: Keep between 200-400ms for smooth transitions
• Z-Index: Only increase if Preloader appears behind other elements
• AJAX Feedback: Keep AJAX trigger enabled for form submissions
• Navigation Feedback: Keep navigation trigger enabled for page transitions
• Professional Look: Use subtle animations (spinning-circle, ring) for corporate sites
• Playful Look: Use animated dots or bouncing effects for creative sites
• Progress Indication: Use progress-bar for operations with known duration
• Consistent Experience: Use same Preloader across entire site
• Loading States: Preloader complements, doesn't replace, skeleton screens
• User Testing: Gather feedback on Preloader visibility and timing

Troubleshooting

Problem: Preloader not appearing on pages

Solution:

• Verify "Enable Preloader" toggle is ON (gradient orange)
• Check that you clicked "Save Preloader Settings" and saw success message
• Verify at least one trigger is enabled (Navigation or AJAX)
• Clear browser cache and hard refresh (Ctrl+F5 or Cmd+Shift+R)
• Check browser console for JavaScript errors
• Ensure <x-global-Preloader /> component is included in layout
• Verify Preloader JavaScript is loading correctly
• Clear application cache: php artisan cache:clear
• Check that Preloader settings exist in database settings table
• Test in different browser to isolate browser-specific issues

Problem: Preloader appears but animation is not visible

Solution:

• Check "Preloader Color" is not same as background color
• Verify Preloader size is appropriate (try increasing to Large)
• Ensure z-index is high enough (default 9999)
• Check that Preloader type is selected correctly
• Test with different Preloader type to isolate animation-specific issues
• Verify CSS is compiled: npm run build
• Check browser console for CSS loading errors
• Ensure Tailwind CSS classes are available
• Test in different browser (some animations may not work in older browsers)
• Check for CSS conflicts with other styles

Problem: Preloader flickers or disappears too quickly

Solution:

• Increase "Minimum Display Time" to 500-800ms
• Ensure minimum display time is greater than 0
• Check that fade duration is not too short (minimum 200ms)
• Verify timing settings were saved correctly
• Test on slower connection to see if issue persists
• Check browser console for timing-related errors
• Ensure JavaScript timing functions are working correctly
• Try disabling browser extensions that may interfere

Problem: Preloader stays visible too long

Solution:

• Decrease "Minimum Display Time" to 300-500ms
• Reduce "Fade Duration" to 200-300ms
• Check that page content is loading correctly
• Verify no JavaScript errors preventing Preloader from hiding
• Ensure Preloader hide function is being called
• Check browser console for errors
• Test with different pages to isolate page-specific issues
• Verify AJAX requests are completing successfully

Problem: Preloader not showing during AJAX requests

Solution:

• Verify "Show on AJAX" toggle is ON
• Check that AJAX requests are using proper headers
• Ensure AJAX requests trigger Preloader show/hide events
• Verify JavaScript event listeners are attached
• Check browser console for JavaScript errors
• Test with simple AJAX request to isolate issue
• Ensure AJAX library (if used) is compatible
• Check that Preloader component is properly initialized

Problem: Preloader colors not matching in dark mode

Solution:

• Verify "Dark Mode Preloader Color" is set correctly
• Check "Dark Mode Background" has sufficient contrast
• Ensure "Dark Mode Text Color" is light enough
• Test dark mode toggle is working correctly
• Clear browser cache and reload
• Verify dark mode CSS classes are applied
• Check that theme switcher is functioning
• Test in browser's dark mode preference
• Ensure Tailwind dark mode classes are compiled

Problem: Loading text not displaying

Solution:

• Verify "Show Loading Text" toggle is ON
• Check that "Loading Text" field has content
• Ensure text color has sufficient contrast with background
• Verify text is not hidden by CSS
• Check that text element is rendering in DOM
• Test with different text color
• Ensure font is loading correctly
• Check browser console for rendering errors
• Verify text size is appropriate for Preloader size

Problem: Preloader appears behind other elements

Solution:

• Increase "Z-Index" value (try 99999 or higher)
• Check for other elements with very high z-index
• Verify Preloader container has proper stacking context
• Ensure background overlay is enabled
• Check CSS for positioning conflicts
• Review other modals or overlays that may interfere
• Test with all other overlays disabled
• Verify Preloader is rendered at end of body
• Check browser developer tools for z-index values

Problem: Preloader animation is choppy or laggy

Solution:

• Try simpler animation type (spinning-circle, ring)
• Check browser performance (close other tabs/applications)
• Verify CSS transitions are hardware accelerated
• Test on different device (older devices may struggle)
• Ensure no heavy JavaScript operations during animation
• Check for memory leaks or performance issues
• Disable browser extensions that may interfere
• Verify GPU acceleration is enabled in browser
• Test with smaller Preloader size
• Check browser console for performance warnings

Problem: Preloader size not changing

Solution:

• Verify "Preloader Size" dropdown is set correctly
• Check that settings were saved successfully
• Clear browser cache and reload page
• Ensure CSS for size classes is compiled
• Verify Tailwind size utilities are available
• Test with different size to confirm functionality
• Check browser console for CSS errors
• Ensure no CSS overrides affecting size
• Try rebuilding CSS: npm run build

Problem: Permission denied when accessing Preloader Settings

Solution:

• Contact administrator to request system.settings permission
• Verify your user role has necessary permissions assigned
• Check that you're logged in with correct account
• Review roles and permissions module for your access level
• Ensure your account is active and not suspended
• Check if permission middleware is correctly applied to route
• Verify route exists: php artisan route:list | grep Preloader
• Check for any custom permission logic that may be blocking access

Problem: Settings not saving or reverting

Solution:

• Check for validation errors on form submission
• Verify all required fields are filled
• Ensure color values are in correct format (hex codes)
• Check browser console for AJAX errors
• Verify CSRF token is valid
• Check server logs for errors
• Ensure database connection is working
• Verify settings table has correct structure
• Check file permissions on storage directories
• Try saving individual sections to isolate issue