Cupón WELCOME disponible Usa el código WELCOME al finalizar la compra hasta el 31 de julio de 2026. WELCOME
Pantalla de carga de FiveM

Cómo crear una pantalla de carga personalizada de FiveM

Bien, profundicemos en la creación de un punto de entrada único y atractivo para tus jugadores.

Vamos a construir un Pantalla de carga personalizada de FiveM Desde cero.

¿Qué es un recurso de pantalla de carga?

Una pantalla de carga personalizada es a menudo la primera interacción que tiene un jugador con su servidor FiveM específico.

Es una oportunidad fantástica para establecer la marca de su servidor, transmitir información importante y crear una atmósfera inmersiva desde el principio.

Olvídate de las imágenes genéricas de FiveM; queremos que los jugadores sientan su la identidad del servidor en el momento en que comienzan a conectarse.

Aquí en FiveMX, creemos en capacitar a los propietarios de servidores con las herramientas y el conocimiento para crear experiencias verdaderamente únicas.

Esta guía completa lo guiará a través de cada paso, desde la estructura HTML básica hasta el estilo con CSS, agregando interactividad con JavaScript y, finalmente, integrándolo sin problemas en su servidor FiveM usando Lua.

Incluso cubriremos cómo ocultar esa animación de puente FiveM predeterminada para una transición más limpia.

Comencemos a hacer que su servidor se destaque.

¿Por qué molestarse con una pantalla de carga FiveM personalizada?

Quizás te preguntes si vale la pena el esfuerzo.

¡Absolutamente!

Piense en ello como el vestíbulo o la entrada a su mundo virtual.

Primeras impresiones: Establece el tono y la profesionalidad de su servidor de inmediato.

Herrada: Refuerza el nombre, el logotipo y el tema general de tu servidor.

Visualización de información: Comparte información crucial como reglas, enlaces de Discord, URL de sitios web o actualizaciones del estado del servidor. antes Los jugadores incluso aparecen.

Compromiso: Utilice música, mensajes dinámicos o incluso vídeos para mantener a los jugadores interesados durante el proceso de carga, reduciendo los tiempos de espera percibidos.

Unicidad: Diferencie su servidor de los innumerables otros utilizando pantallas predeterminadas o genéricas.

Una pantalla de carga bien diseñada demuestra que te preocupas por los detalles y la experiencia del jugador.

Prerrequisitos

Antes de comenzar a codificar, asegurémonos de que tienes las herramientas necesarias y los conocimientos básicos:

  1. Editor de texto: Necesitarás un programa para escribir tu código.
    • Visual Studio Code (VS Code): gratuito, potente y muy recomendado, con muchas extensiones útiles.
    • Sublime Text: Otra opción popular y ligera.
    • Notepad++: una opción sólida y gratuita para los usuarios de Windows.
    • Evitar utilizando el Bloc de notas básico o TextEdit, ya que carecen de funciones útiles para la codificación (como el resaltado de sintaxis).
  2. Conocimientos básicos de desarrollo web (útiles, no esenciales):
    • HTML (lenguaje de marcado de hipertexto): Comprende la estructura básica de una página web (etiquetas como <div>, <img>, <p>Proporcionaremos el código, pero conocer los conceptos básicos ayuda.
    • CSS (hojas de estilo en cascada): Sabe cómo aplicar estilos a elementos HTML (colores, tamaños, posiciones). Le guiaremos, pero se valorará la familiaridad.
    • JavaScript (JS): Comprende los conceptos básicos de programación para añadir interactividad. Al principio, mantendremos el código JavaScript relativamente simple.
  3. Acceso al servidor FiveM: Necesita acceder a los archivos de su servidor, específicamente a los recursos carpeta, para instalar la pantalla de carga.
  4. Software de edición de imágenes (opcional): Herramientas como Photoshop, GIMP (gratis) o incluso Canva pueden ser útiles para crear o editar logotipos e imágenes de fondo.
  5. Paciencia y voluntad de aprender: ¡La depuración y los ajustes son parte del proceso!

No te preocupes si no eres un experto en desarrollo web.

Explicaremos cada paso claramente y proporcionaremos fragmentos de código que se pueden copiar y pegar.

Cómo funcionan las pantallas de carga de FiveM (NUI)

FiveM utiliza un sistema llamado NUI (Interfaz de usuario nativa) para mostrar páginas web adentro el juego.

Básicamente, tu pantalla de carga personalizada es solo una página web estándar (construida con HTML, CSS y JavaScript) que el sistema NUI de FiveM procesa mientras los recursos del juego se cargan en segundo plano.

Esto significa que podemos aprovechar las tecnologías web estándar para crear experiencias visualmente ricas e interactivas.

El centro los componentes son:

  • índice.html: El archivo principal que define la estructura y el contenido de la pantalla de carga.
  • estilo.css: El archivo que define la apariencia visual (diseño, colores, fuentes, etc.).
  • script.js: El archivo que agrega comportamiento dinámico (como cambiar texto, animaciones, reproducción de música).
  • fxmanifest.lua (o __resource.lua): Un archivo FiveM especial que le dice al servidor que este es un recurso, especifica que es una pantalla de carga y enumera todos los archivos necesarios.

Ahora, comencemos a construir.

Paso 1: Creación de la estructura HTML básica (índice.html)

Primero, crea una nueva carpeta para el recurso de la pantalla de carga. Llamémosla mi pantalla de carga.

Dentro de esta carpeta, crea un archivo llamado índice.html.

Este archivo contendrá el esqueleto de nuestra pantalla de carga.

Necesitamos contenedores para diferentes elementos: el fondo, un logotipo, una indicación del progreso de carga y áreas para mensajes de texto.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nombre del servidor - Cargando...</title>
    <!-- Link to your CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Main container for the entire screen -->
    <div class="loading-container">

        <!-- Background Element (handled by CSS) -->
        <div class="background"></div>

        <!-- Content Wrapper -->
        <div class="content">

            <!-- Logo Area -->
            <div class="logo-area">
                <img src="imágenes/logo.png" alt="Logotipo del servidor" id="server-logo">
                <!-- You can replace img with text if you prefer -->
                <!-- <h1>My Awesome Server</h1> -->
            </div>

            <!-- Message Area -->
            <div class="message-area">
                <p id="loading-message">Inicializando conexión...</p>
                <p id="dynamic-message">¡Bienvenido! Cargando recursos del servidor...</p>
            </div>

            <!-- Progress Bar Area -->
            <div class="progress-bar-container">
                <div class="progress-bar">
                    <div class="progress-bar-inner" id="progress-bar-inner"></div>
                </div>
                <p id="progress-text">0%</p>
            </div>

             <!-- Music Control (Optional) -->
             <div class="music-control">
                <button id="play-pause-button">Pausa música</button>
                <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.5">
            </div>

        </div> <!-- End Content Wrapper -->

    </div> <!-- End Loading Container -->

    <!-- Link to your JavaScript file (place at the end of body) -->
    <script src="script.js"></script>
</body>
</html>

Explicación:

  • & <html>: Texto estándar HTML5.
  • : Contiene metainformación y enlaces a recursos externos.
    • conjunto de caracteres="UTF-8":Garantiza la correcta visualización de los caracteres.
    • ventana gráfica:Importante para el diseño responsivo (adaptarse a diferentes tamaños de pantalla), aunque menos crítico para las pantallas de carga de juegos de resolución fija.
    • </code>:Establece el texto que puede aparecer en una pestaña del navegador (menos relevante en FiveM NUI, pero es una buena práctica).</li> <li><code></code>:Conecta nuestro HTML a nuestro archivo CSS para darle estilo.</li> </ul> </li> <li><strong><code><body></code>:</strong> Contiene el contenido visible de la página.</li> <li><strong><code><div class="loading-container"></code>:</strong> El contenedor principal para todo. Lo usaremos para el diseño general.</li> <li><strong><code><div class="background"></code>:</strong> Un div vacío que diseñaremos con CSS para contener nuestra imagen de fondo o video.</li> <li><strong><code><div class="content"></code>:</strong> Envuelve el contenido real (logotipo, texto, barra de progreso) para ayudar con el centrado y el posicionamiento.</li> <li><strong><code><div class="logo-area"></code>:</strong> Un contenedor para el logotipo de su servidor. <ul class="wp-block-list"> <li><code><img src="imágenes/logo.png" ...></code>:Una etiqueta de imagen. <strong>Importante:</strong> Necesitarás crear un <code>imágenes</code> carpeta dentro <code>mi pantalla de carga</code> y coloca tu <code>logotipo.png</code> Archivo allí. ¡Asegúrate de que el nombre del archivo coincida!</li> </ul> </li> <li><strong><code><div class="message-area"></code>:</strong> Contiene mensajes de texto. <ul class="wp-block-list"> <li>Damos identificadores a los párrafos (<code>mensaje de carga</code>, <code>mensaje dinámico</code>) para que podamos orientarlos fácilmente con JavaScript más adelante.</li> </ul> </li> <li><strong><code><div class="progress-bar-container"></code>:</strong> Contiene los elementos de la barra de progreso. <ul class="wp-block-list"> <li><code>.barra de progreso</code>:El contenedor exterior de la barra.</li> <li><code>.barra de progreso interna</code>La parte interior que se llenará. Le damos un ID (<code>barra de progreso interna</code>) para el control de JS.</li> <li><code><p id="progress-text"></code>:Muestra el texto de porcentaje, también con un ID.</li> </ul> </li> <li><strong><code><div class="music-control"></code>:</strong> (Opcional) Controles básicos para música de fondo. Los ID permiten la interacción con JS.</li> <li><strong><code></code>:</strong> Vincula nuestro HTML a nuestro archivo JavaScript. Lo coloca al final del... <code><body></code> garantiza que los elementos HTML existan antes de que el script intente interactuar con ellos.</li> </ul> <p class="wp-block-paragraph">Guarde este archivo como <code>índice.html</code> En tu <code>mi pantalla de carga</code> carpeta. Crear una <code>imágenes</code> subcarpeta y agregar un marcador de posición <code>logotipo.png</code> por ahora.</p> <h2 class="wp-block-heading" id="step-2-styling-the-loading-screen-css-style-css">Paso 2: Dar estilo a la pantalla de carga (CSS – <code>estilo.css</code>)</h2> <p class="wp-block-paragraph">¡Ahora, hagámoslo lucir bien!</p> <p class="wp-block-paragraph">Crea un archivo llamado <code>estilo.css</code> en el mismo <code>mi pantalla de carga</code> carpeta.</p> <p class="wp-block-paragraph">Este archivo controla la presentación visual.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/* Restablecimiento básico y estilo del cuerpo */ * { margin: 0; padding: 0; box-sizing: border-box; /* Hace que el ancho/alto incluya el relleno y el borde */ } body, html { height: 100%; width: 100%; overflow: hidden; /* Ocultar barras de desplazamiento */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente de ejemplo */ color: #ffffff; /* Color de texto predeterminado (blanco) */ } /* Contenedor principal */ .loading-container { position: relative; /* Necesario para el posicionamiento absoluto de los elementos secundarios */ width: 100%; height: 100%; display: flex; /* Usar flexbox para centrar el contenido */ justify-content: center; align-items: center; text-align: center; } /* Estilo de fondo */ .background { position: absolute; /* Ocupar pantalla completa detrás del contenido */ top: 0; left: 0; width: 100%; height: 100%; background-image: url('images/background.jpg'); /* CAMBIAR ESTO a su imagen */ background-size: cover; /* Escalar la imagen para cubrir el contenedor */ background-position: center center; /* Centrar la imagen */ background-repeat: no-repeat; z-index: -1; /* Colocarla detrás de otro contenido */ filter: brilliant(0.6); /* Opcional: Oscurecer ligeramente el fondo */ } /* --- O Usar un fondo de color sólido --- */ /* .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1a1a1a; z-index: -1; } */ /* Envoltura de contenido */ .content { z-index: 1; /* Asegurarse de que el contenido esté por encima del fondo */ padding: 20px; background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */ border-radius: 10px; max-width: 600px; /* Limitar el ancho del contenido */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } /* Área del logotipo */ .logo-area { margin-bottom: 30px; } #server-logo { max-width: 200px; /* Ajustar el ancho máximo del logotipo */ height: auto; /* Mantener la relación de aspecto */ display: block; /* Permite que el margen se centre automáticamente */ margin-left: auto; margin-right: auto; } /* Área de mensajes */ .message-area { margin-bottom: 30px; } #loading-message { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: #cccccc; } #dynamic-message { font-size: 1em; min-height: 40px; /* Evitar cambios de diseño cuando cambia el mensaje */ } /* Área de barra de progreso */ .progress-bar-container { width: 80%; /* Ancho relativo al contenedor de contenido */ margin: 0 auto; /* Centrar el contenedor */ margin-bottom: 20px; } .progress-bar { width: 100%; background-color: #555555; /* Fondo gris oscuro */ border-radius: 5px; overflow: hidden; /* Ocultar la barra interna desbordante */ height: 25px; /* Altura de la barra */ border: 1px solid #333; } .progress-bar-inner { height: 100%; width: 0%; /* Comenzar en 0% de ancho */ background-color: #4CAF50; /* Color de progreso verde */ border-radius: 5px 0 0 5px; /* Mantener el radio izquierdo */ transition: width 0.5s ease-in-out; /* Transición suave para cambios de ancho */ text-align: center; line-height: 25px; /* Centrar verticalmente el texto si es necesario en el interior */ color: white; } #progress-text { margin-top: 5px; font-size: 0.9em; } /* Control de música (opcional) */ .music-control { margin-top: 25px; display: flex; /* Organizar el botón y el control deslizante uno al lado del otro */ justify-content: center; align-items: center; gap: 15px; /* Espacio entre elementos */ } #play-pause-button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s ease; } #play-pause-button:hover { background-color: #45a049; } #volume-slider { cursor: pointer; width: 150px; /* Ajustar el ancho del control deslizante */ } /* Agregar alguna capacidad de respuesta básica si es necesario, aunque es menos crítico en NUI */ @media (max-width: 600px) { .content { max-width: 90%; } .progress-bar-container { width: 90%; } }</pre> <p class="wp-block-paragraph"><strong>Explicación:</strong></p> <ul class="wp-block-list"> <li><strong><code>* { tamaño de caja: caja de borde; }</code></strong>:Un reinicio común para hacer que los elementos de tamaño sean más predecibles.</li> <li><strong><code>cuerpo, html</code></strong>: Establece la altura y el ancho base y oculta las posibles barras de desplazamiento. Establece una fuente y un color de texto predeterminados.</li> <li><strong><code>.contenedor de carga</code></strong>:Usos <code>pantalla: flexible</code> para centrar fácilmente el <code>.contenido</code> div ambos horizontalmente (<code>justificar-contenido</code>) y verticalmente (<code>elementos de alineación</code>). <code>posición: relativa</code> es crucial para posicionar el fondo absoluto.</li> <li><strong><code>.fondo</code></strong>: <ul class="wp-block-list"> <li><code>posición: absoluta</code>: Saca el elemento del flujo normal y lo posiciona en relación con el ancestro posicionado más cercano (<code>.contenedor de carga</code>).</li> <li><code>arriba: 0; izquierda: 0; ancho: 100%; alto: 100%;</code>:Hace que cubra todo el recipiente.</li> <li><code>imagen de fondo: url(...)</code>: <strong>De manera crucial, el cambio <code>'imágenes/fondo.jpg'</code> a la ruta real de su imagen de fondo.</strong> Asegúrese de que la imagen esté en el <code>imágenes</code> carpeta.</li> <li><code>tamaño de fondo: portada</code>:Escala la imagen de forma agradable.</li> <li><code>índice z: -1</code>:Lo empuja detrás de otros elementos.</li> <li><code>filtro: brillo(0.6)</code>Efecto opcional para oscurecer el fondo y hacer el texto más legible. Ajusta o elimina según sea necesario.</li> <li><em>Alternativa:</em> Una sección comentada muestra cómo utilizar un color de fondo sólido simple en lugar de una imagen.</li> </ul> </li> <li><strong><code>.contenido</code></strong>: <ul class="wp-block-list"> <li><code>índice z: 1</code>:Asegura que quede encima del fondo.</li> <li><code>color de fondo: rgba(0, 0, 0, 0.5)</code>Un fondo negro semitransparente para el área de contenido, que ayuda a que el texto destaque sobre fondos complejos. Ajuste el último valor (alfa) de 0 (totalmente transparente) a 1 (totalmente opaco).</li> <li><code>radio del borde</code>, <code>ancho máximo</code>, <code>sombra de caja</code>:Añade un poco de brillo visual.</li> </ul> </li> <li><strong><code>.área de logotipo</code>, <code>Logotipo del servidor #</code></strong>:Estiliza el contenedor del logotipo y la imagen del logotipo en sí (estableciendo ancho máximo, centrado).</li> <li><strong><code>.área de mensajes</code>, <code>Mensaje de carga #</code>, <code>Mensaje dinámico #</code></strong>:Estiliza los elementos de texto (tamaño de fuente, color, márgenes). <code>altura mínima</code> Evita que el diseño salte cuando el contenido del mensaje dinámico cambia de longitud.</li> <li><strong><code>contenedor de barra de progreso</code>, <code>.barra de progreso</code>, <code>.barra de progreso interna</code></strong>:Estiliza la barra de progreso. <ul class="wp-block-list"> <li>El contenedor exterior (<code>.barra de progreso</code>) establece el color y la forma del fondo.</li> <li>La barra interior (<code>.barra de progreso interna</code>) es lo que crece. Empieza en <code>ancho: 0%</code>Cambiaremos este ancho usando JavaScript. <code>transición: ancho 0,5 s entrada-salida suave;</code> Hace que el cambio de ancho sea suave.</li> </ul> </li> <li><strong><code>.control de música</code>, <code>Botón de reproducción-pausa #</code>, <code>#control deslizante de volumen</code></strong>:Diseña los controles de música opcionales usando flexbox para el diseño y agregando estilo básico a los botones.</li> <li><strong><code>@media (ancho máximo: 600px)</code></strong>Un ejemplo sencillo de consulta de medios para mejorar la capacidad de respuesta. Ajusta el ancho del contenido en pantallas más pequeñas (menos crítico para FiveM, pero recomendable).</li> </ul> <p class="wp-block-paragraph">Guardar esto como <code>estilo.css</code>Recuerde crear el <code>imágenes</code> carpeta y agregue su <code>fondo.jpg</code> (o como lo hayas llamado) y <code>logotipo.png</code>.</p> <p class="wp-block-paragraph">En este punto, técnicamente podrías abrir el <code>índice.html</code> ¡Archive directamente en su navegador web (como Chrome o Firefox) para obtener una vista previa de su apariencia estática!</p> <h2 class="wp-block-heading" id="step-3-adding-interactivity-dynamic-content-java-script-script-js">Paso 3: Agregar interactividad y contenido dinámico (JavaScript – <code>script.js</code>)</h2> <p class="wp-block-paragraph">Ahora vamos a darle algo de vida a nuestra página estática usando JavaScript.</p> <p class="wp-block-paragraph">Crea un archivo llamado <code>script.js</code> En tu <code>mi pantalla de carga</code> carpeta.</p> <p class="wp-block-paragraph">Agregaremos funcionalidad para:</p> <ol class="wp-block-list"> <li>Simulación del progreso de carga.</li> <li>Visualización de mensajes dinámicos/cambiantes.</li> <li>Agregar música de fondo con controles.</li> <li>Manejo de eventos NUI de FiveM (la forma correcta de obtener el progreso de carga).</li> </ol> <pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">// Espera a que el DOM (Document Object Model, la estructura HTML) esté completamente cargado document.addEventListener('DOMContentLoaded', () => { // --- Obtener referencias a elementos HTML --- const progressBarInner = document.getElementById('progress-bar-inner'); const progressText = document.getElementById('progress-text'); const dynamicMessage = document.getElementById('dynamic-message'); const loadingMessage = document.getElementById('loading-message'); // Para actualizar etapas // --- Configuración --- const messages = [ "Cargando sistemas centrales...", "Estableciendo conexión de red...", "Descargando los últimos recursos del servidor...", "Sincronizando datos del jugador...", "Analizando detalles del mapa...", "Ya casi estamos, preparando el mundo...", "Consejo: Visita nuestro Discord en discord.gg/yourinvite", "Consejo: Consulta las reglas en nuestro sitio web yourwebsite.com", "¡Bienvenido a nuestro increíble servidor!" ]; let currentMessageIndex = 0; const messageChangeInterval = 5000; // Cambiar el mensaje cada 5 segundos (5000ms) // Música de fondo (opcional) const backgroundMusic = new Audio('audio/background_music.ogg'); // IMPORTANTE: use .ogg para compatibilidad con FiveM backgroundMusic.volume = 0.5; // Establecer el volumen inicial (0.0 a 1.0) backgroundMusic.loop = true; // Repetir la música const playPauseButton = document.getElementById('play-pause-button'); const volumeSlider = document.getElementById('volume-slider'); let isPlaying = false; // Estado de la pista de música // --- Funciones --- // Función para actualizar la barra de progreso y el texto function updateProgress(percentage) { percentage = Math.min(100, Math.max(0, percentage)); // Fijación entre 0 y 100 progressBarInner.style.width = `${percentage}%`; progressText.textContent = `${Math.round(percentage)}%`; } // Función para cambiar el mensaje dinámico function changeDynamicMessage() { dynamicMessage.style.opacity = 0; // Fundido de salida setTimeout(() => { currentMessageIndex = (currentMessageIndex + 1) % messages.length; dynamicMessage.textContent = messages[currentMessageIndex]; dynamicMessage.style.opacity = 1; // Fundido de entrada }, 500); // Esperar la transición de desvanecimiento (0.5s) } // Función para intentar reproducir música (maneja las restricciones de reproducción automática del navegador) function playMusic() { backgroundMusic.play().then(() => { isPlaying = true; playPauseButton.textContent = 'Pausar música'; console.log("La música comenzó a reproducirse."); }).catch(error => { // Se evitó la reproducción automática, común en los navegadores hasta la interacción del usuario console.log("Error en la reproducción automática de música. Esperando la interacción del usuario.", error); isPlaying = false; playPauseButton.textContent = 'Reproducir música'; // Es posible que necesitemos un detector de clics en el cuerpo o el botón para iniciar la reproducción }); } // --- Configuración inicial --- // Establecer el mensaje de carga inicial loadingMessage.textContent = "Inicializando..."; updateProgress(0); // Iniciar el progreso en 0% // Comenzar a cambiar los mensajes dinámicos dynamicMessage.textContent = messages[0]; // Mostrar el primer mensaje inmediatamente setInterval(changeDynamicMessage, messageChangeInterval); // Intentar reproducir música automáticamente playMusic(); // Intentar reproducir música de fondo // --- Oyentes de eventos --- // Controles de música Oyentes de eventos playPauseButton.addEventListener('click', () => { if (isPlaying) { backgroundMusic.pause(); isPlaying = false; playPauseButton.textContent = 'Play Music'; } else { // Importante: Volver a activar la función de reproducción que maneja posibles fallas iniciales playMusic(); } }); volumeSlider.addEventListener('input', (event) => { backgroundMusic.volume = event.target.value; }); // --- Manejo de eventos de FiveM NUI --- // Este es el NÚCLEO de la interacción con el proceso de carga de FiveM /* Los mensajes de FiveM NUI se envían a través de eventos de JavaScript. Escuchamos los eventos 'message' en el objeto de ventana. La propiedad 'datos' del evento contiene la información enviada desde Lua. */ window.addEventListener('message', function(event) { const data = event.data; // Verificar el tipo de mensaje NUI específico usado por FiveM para el progreso de carga // El evento 'loadstatus' proporciona un texto de progreso general. if (data.type === 'loadstatus') { if(data.status) { loadingMessage.textContent = data.status; } } // El evento 'progress' proporciona el progreso detallado del componente (use esto para la barra) else if (data.eventName === 'progress') { // data.loadFraction da un valor entre 0.0 y 1.0 const progressPercentage = data.loadFraction * 100; updateProgress(progressPercentage); } // Un evento personalizado que podríamos enviar desde Lua cuando la carga esté casi terminada else if (data.type === 'loadingComplete') { updateProgress(100); loadingMessage.textContent = "¡Carga completa! Uniéndose al servidor..."; // Puede agregar efectos de desvanecimiento aquí antes de que desaparezca la pantalla } }); // --- Progreso simulado/de reserva (si no se reciben eventos NUI o para pruebas) --- // Comente esto o elimínelo si depende únicamente de los eventos NUI de FiveM /* let simulatordProgress = 0; const interval = setInterval(() => { simulatordProgress += Math.random() * 5; // Incrementar en una pequeña cantidad aleatoria if (simulatedProgress >= 100) { simulatordProgress = 100; clearInterval(interval); // Detener la simulación cuando se alcanza 100% loadingMessage.textContent = "¡Carga completa! Uniéndose al servidor..."; // Actualizar el mensaje final } updateProgress(simulatedProgress); }, 300); // Actualizar cada 300ms */ // Agregar un pequeño efecto de aparición gradual para toda la pantalla al cargar document.body.style.opacity = 0; setTimeout(() => { document.body.style.transition = 'opacity 1s ease-in-out'; document.body.style.opacity = 1; }, 100); // Iniciar la aparición gradual ligeramente después de la carga }); // Fin de DOMContentLoaded</pre> <p class="wp-block-paragraph"><strong>Explicación:</strong></p> <ol class="wp-block-list"> <li><strong><code>documento.addEventListener('DOMContentLoaded', () => { ... });</code></strong>:Esto garantiza que el código JavaScript solo se ejecute <em>después</em> Toda la estructura de la página HTML se ha cargado y está lista para ser manipulada.</li> <li><strong>Referencias de elementos:</strong> Obtenemos referencias a los elementos HTML con los que necesitamos interactuar usando <code>documento.getElementById()</code>Por eso es importante tener identificadores únicos en el HTML.</li> <li><strong>Configuración:</strong> <ul class="wp-block-list"> <li><code>mensajes</code>Una matriz que contiene las diferentes cadenas de texto que quieres recorrer en el área de mensajes dinámicos. ¡Personalízalas!</li> <li><code>índice de mensaje actual</code>:Realiza un seguimiento de qué mensaje se muestra actualmente.</li> <li><code>Intervalo de cambio de mensaje</code>:Establece la frecuencia (en milisegundos) con la que cambia el mensaje.</li> </ul> </li> <li><strong>Configuración de música de fondo:</strong> <ul class="wp-block-list"> <li><code>nuevo Audio('audio/musica_de_fondo.ogg')</code>:Crea un objeto de audio HTML. <strong>De manera crucial:</strong> <ul class="wp-block-list"> <li>Crear un <code>audio</code> carpeta dentro <code>mi pantalla de carga</code>.</li> <li>Coloque allí su archivo de música de fondo.</li> <li><strong>Utilice el <code>.ogg</code> ¡formato!</strong> MP3 y otros formatos pueden ser poco fiables o no funcionar en absoluto en FiveM NUI. Puedes encontrar fácilmente convertidores en línea para convertir MP3 a OGG.</li> </ul> </li> <li><code>Música de fondo.volumen</code>:Establece el volumen inicial (0.0 = silencioso, 1.0 = completo).</li> <li><code>backgroundMusic.loop = verdadero;</code>:Hace que la música se repita.</li> <li>También encontramos referencias al botón de reproducción/pausa y al control deslizante de volumen.</li> </ul> </li> <li><strong><code>updateProgress(porcentaje)</code> función:</strong> Toma un número (0-100), lo fija para garantizar que esté dentro de los límites y lo actualiza. <code>ancho</code> estilo del elemento de la barra de progreso interna y cambia el contenido de texto de la visualización del porcentaje.</li> <li><strong><code>cambiarMensajeDinámico()</code> función:</strong> <ul class="wp-block-list"> <li>Usos <code>establecerIntervalo</code> en la fase de configuración para llamar a esta función repetidamente.</li> <li>Calcula el índice del siguiente mensaje, repitiendo el proceso usando el operador módulo (<code>%</code>).</li> <li>Actualiza el <code>Contenido del texto</code> del <code>mensaje dinámico</code> elemento.</li> <li><em>Prima:</em> Incluye un efecto de entrada y salida gradual simple mediante opacidad CSS y <code>establecer tiempo de espera</code> Para una transición más suave. Añadir <code>transición: opacidad 0,5 s entrada-salida suave;</code> hacia <code>.área de mensajes p</code> selector en su CSS para que esto funcione visualmente.</li> </ul> </li> <li><strong><code>reproducirMúsica()</code> función:</strong> Intentos de reproducir la música usando <code>Música de fondo.reproducir()</code>. El <code>.entonces()</code> maneja la reproducción exitosa, mientras <code>.atrapar()</code> Gestiona errores que suelen ocurrir debido a restricciones de reproducción automática del navegador (que requieren la interacción del usuario). Actualiza el texto del botón según corresponda.</li> <li><strong>Configuración inicial:</strong> Establece el texto inicial, restablece el progreso a 0, muestra el primer mensaje dinámico e inicia el temporizador de intervalo para los cambios de mensaje. También llama <code>reproducirMúsica()</code> para intentar iniciar el audio.</li> <li><strong>Oyentes de eventos (controles de música):</strong> <ul class="wp-block-list"> <li>Escucha los clics en el <code>botón de reproducción y pausa</code>Si se está reproduciendo música, la pausa; de lo contrario, la llama. <code>reproducirMúsica()</code> nuevamente (importante para manejar casos donde la reproducción automática inicial falló).</li> <li>Escucha por <code>aporte</code> eventos en el <code>control deslizante de volumen</code> (se dispara continuamente a medida que se mueve el control deslizante) y actualiza el <code>Música de fondo.volumen</code>.</li> </ul> </li> <li><strong>Manejo de eventos de FiveM NUI (<code>ventana.addEventListener('mensaje', ...)</code>):</strong> <ul class="wp-block-list"> <li><strong>Esta es la parte más importante para <em>real</em> integración.</strong> FiveM envía mensajes a la ventana NUI (su página HTML) utilizando el <code>postMensaje</code> API.</li> <li>Escuchamos estos mensajes en el <code>ventana</code> objeto.</li> <li><code>evento.datos</code> contiene la carga útil enviada desde <a href="https://fivemx.com/es/conversion-de-scripts-fivem/" title="Conversión de scripts de FiveM: ESX, QBCore, QBOX (Guía del framework)" data-wpil-monitor-id="1644">Los scripts Lua de FiveM</a>.</li> <li>Nosotros comprobamos <code>tipo de datos del evento</code> o <code>evento.datos.nombreDelEvento</code> (diferentes versiones/contextos de FiveM pueden usar estructuras ligeramente diferentes) para ver qué tipo de mensaje es.</li> <li><code>'estado de carga'</code>: Suele contener texto de estado general (p. ej., "Cargando mapa", "Inicializando scripts"). Actualizamos <code>mensaje de carga</code> párrafo.</li> <li><code>'progreso'</code>:Esto normalmente se usa para el progreso de la barra de carga real. <code>datos.loadFraction</code> Generalmente proporciona un valor de 0,0 a 1,0, que convertimos a un porcentaje y alimentamos a nuestro <code>actualizarProgreso</code> función.</li> <li><code>'carga completa'</code>:Este no es un evento FiveM estándar, sino un ejemplo de uno <em>costumbre</em> mensaje para ti <em>podría</em> enviar desde un script Lua (que discutiremos más adelante) para señalar el final de la carga, lo que le permite establecer el progreso en 100% y mostrar un mensaje final.</li> </ul> </li> <li><strong>Retroceso/Progreso simulado:</strong> <ul class="wp-block-list"> <li>La sección comentada proporciona una <em>simulación básica</em> del progreso. Utiliza <code>establecerIntervalo</code> para incrementar la barra de progreso en una pequeña cantidad aleatoria periódicamente.</li> <li><strong>Esto es útil para probar visualmente la pantalla de carga en un navegador. <em>sin</em> ejecutando FiveM.</strong></li> <li><strong>Debes ELIMINAR o COMENTAR este código de simulación cuando uses los eventos NUI de FiveM reales</strong>De lo contrario, es posible que veas actualizaciones de progreso conflictivas.</li> </ul> </li> <li><strong>Efecto de fundido de entrada:</strong> Agrega un desvanecimiento sutil para todo el cuerpo cuando se carga la página para una apariencia más suave.</li> </ol> <p class="wp-block-paragraph">Guarde este archivo como <code>script.js</code>Recuerde crear el <code>audio</code> carpeta y agregue su <code>.ogg</code> archivo de música.</p> <h2 class="wp-block-heading" id="step-4-integrating-with-five-m-lua-fxmanifest-lua">Paso 4: Integración con FiveM (Lua – <code>fxmanifest.lua</code>)</h2> <p class="wp-block-paragraph">Ahora necesitamos informar al servidor FiveM sobre nuestro nuevo recurso e identificarlo como una pantalla de carga.</p> <p class="wp-block-paragraph">Crea un archivo llamado <code>fxmanifest.lua</code> en la raíz de tu <code>mi pantalla de carga</code> carpeta.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">-- Manifiesto de recursos fx_version 'cerulean' -- Use 'cerulean' o una versión más nueva como 'adamant' o 'bodacious' juego 'gta5' autor 'Su nombre o nombre del servidor' descripción 'Pantalla de carga personalizada para mi increíble servidor' versión '1.0.0' -- Especifique este recurso como la pantalla de carga loadscreen 'index.html' -- Enumera todos los archivos que necesita la IU (HTML, CSS, JS, imágenes, audio, fuentes, etc.) archivos { 'index.html', 'style.css', 'script.js', 'images/logo.png', 'images/background.jpg', -- Agrega todas tus imágenes aquí 'audio/background_music.ogg' -- Agrega todos tus archivos de audio aquí -- 'fonts/mycustomfont.woff2' -- Agrega fuentes personalizadas si usas alguna } -- Opcional: script de cliente para control avanzado (como ocultar elementos predeterminados) client_script 'client.lua' -- Opcional: si tu pantalla de carga necesita obtener datos DEL servidor (más avanzado) -- server_script 'server.lua' -- Opcional: defina la configuración de NUI si es necesario (raramente se requiere para pantallas de carga básicas) -- nui_settings { -- ['scriptFramePolicy'] = "frame-ancestors 'self' https://cfx.re" -- Ejemplo de política de seguridad -- }</pre> <p class="wp-block-paragraph"><strong>Explicación:</strong></p> <ul class="wp-block-list"> <li><strong><code>fx_version 'cerúleo'</code></strong>Define la versión del manifiesto. «Cerulean» es una versión base común, pero existen versiones más recientes como «Adamant» o «Bodacious». Utilícela a menos que necesite funciones de versiones más recientes.</li> <li><strong><code>juego 'gta 5'</code></strong>: Especifica el juego para el cual es este recurso.</li> <li><strong><code>autor</code>, <code>descripción</code>, <code>versión</code></strong>Metadatos sobre su recurso. Complete estos campos según corresponda.</li> <li><strong><code>pantalla de carga 'index.html'</code></strong>: <strong>Ésta es la línea crucial.</strong> Le dice a FiveM que use el archivo HTML especificado (<code>índice.html</code> en nuestro caso) como pantalla de carga del juego.</li> <li><strong><code>archivos { ... }</code></strong>: <strong>¡Muy importante!</strong> Debes enumerar <em>cada archivo individual</em> Que su página HTML necesita cargar, en relación con la carpeta raíz del recurso. Esto incluye: <ul class="wp-block-list"> <li>El archivo HTML en sí (<code>índice.html</code>)</li> <li>El archivo CSS (<code>estilo.css</code>)</li> <li>El archivo JavaScript (<code>script.js</code>)</li> <li>Todas las imágenes (por ejemplo, <code>imágenes/logo.png</code>, <code>imágenes/fondo.jpg</code>)</li> <li>Todos los archivos de audio (por ejemplo, <code>audio/música_de_fondo.ogg</code>)</li> <li>Cualquier fuente personalizada que puedas tener vinculada en tu CSS.</li> <li><em>¡Si olvidas un archivo aquí, no se cargará en el juego!</em></li> </ul> </li> <li><strong><code>script de cliente 'cliente.lua'</code></strong>Incluimos esto porque crearemos un pequeño script de cliente en el próximo paso para manejar el ocultamiento de los elementos de carga predeterminados de FiveM.</li> <li><strong><code>script_servidor 'servidor.lua'</code></strong>:Solo es necesario para escenarios avanzados donde la pantalla de carga debe comunicarse con el servidor (por ejemplo, obtener recuentos dinámicos de jugadores) <em>antes</em> Se carga el entorno principal del juego, lo cual es complejo. No lo usaremos para una configuración básica.</li> <li><strong><code>configuración nui</code></strong>Permite configurar políticas de seguridad específicas para el marco NUI. Generalmente no es necesario para pantallas de carga estándar, a menos que se incruste contenido externo o se gestionen interacciones complejas.</li> </ul> <p class="wp-block-paragraph">Guarde este archivo como <code>fxmanifest.lua</code>.</p> <p class="wp-block-paragraph"><em>(Nota: Los servidores más antiguos pueden usar <code>__resource.lua</code> en lugar de <code>fxmanifest.lua</code>La sintaxis es muy similar, pero <code>versión fx</code> Generalmente se omite o es diferente, y las directivas pueden variar ligeramente. <code>fxmanifest.lua</code> (es el estándar moderno).</em></p> <h2 class="wp-block-heading" id="step-5-disabling-the-default-five-m-bridge-animation-lua-client-lua">Paso 5: Deshabilitar la animación predeterminada del puente FiveM (Lua – <code>cliente.lua</code>)</h2> <p class="wp-block-paragraph">De forma predeterminada, FiveM muestra su propio texto de carga y, a veces, una animación de carga de "puente". <em>antes</em> Tu pantalla personalizada toma el control por completo. Podemos ocultarlas para una apariencia más limpia usando un script Lua del lado del cliente.</p> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-link-color wp-element-button" href="https://fivemx.com/es/deshabilitar-el-elemento-puente-en-la-pantalla-de-carga-de-fivem/">Desactivar la animación del puente</a></div> </div> <p class="wp-block-paragraph">Crea un archivo llamado <code>cliente.lua</code> En tu <code>mi pantalla de carga</code> carpeta.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">-- client.lua para el recurso de la pantalla de carga -- Este código se ejecuta en cuanto se inicia el recurso en el cliente -- Esperamos un breve instante para asegurarnos de que NUI esté probablemente lista Citizen.Wait(100) -- Método 1: Usar ShutdownLoadingScreenNui (Recomendado para un ocultamiento simple) -- Esto intenta ocultar inmediatamente los elementos predeterminados de la GUI de carga de FiveM. -- Suele ser efectivo, pero la sincronización a veces puede ser complicada dependiendo de la velocidad de carga del cliente. ShutdownLoadingScreenNui() -- También puedes enviar un mensaje a tu página NUI si es necesario, por ejemplo, -- para indicar que Lua está listo o pasar datos iniciales. -- SendNUIMessage({ -- type = "luaReady", -- message = "¡El script del cliente se ha cargado!" -- }) -- Método 2: Ocultamiento más controlado usando CreateThread y AddTextEntry -- Este método anula continuamente las entradas de texto de carga predeterminadas. -- Puede ser más fiable para garantizar que el texto predeterminado no parpadee brevemente. -- Descomente esta sección y comente ShutdownLoadingScreenNui() si lo prefiere. --[[ Citizen.CreateThread(function() -- Ocultar los componentes de texto predeterminados "Inicializando..." AddTextEntry('FE_THDR_GTAO', ' ') -- Cargando en línea AddTextEntry('PM_NAME_APP', ' ') -- Nombre de la aplicación FiveM (puede variar) AddTextEntry('PM_INFO_DET', ' ') -- Información de compilación / Estado de conexión AddTextEntry('LOADING_SPLAYER_L', ' ') -- Cargando el modo historia (a veces aparece) AddTextEntry('DLC_ITEM_UNLOCK', ' ') -- Desbloquear mensajes si los hay -- Seguir anulándolos periódicamente mientras se espera que la pantalla personalizada esté activa -- Este bucle puede ser excesivo; a menudo, basta con configurarlos una vez. -- Ajustar el tiempo de espera o eliminar el bucle si el rendimiento se ve afectado. while true do Citizen.Wait(500) -- Verificar/anular cada 500 ms -- Verificar si la pantalla de carga sigue activa (pseudocódigo, necesita lógica real) -- local isLoading = GetIsLoadingScreenActive() -- Este nativo podría no funcionar lo suficientemente temprano -- si no es isLoading entonces interrumpe fin -- Salir del bucle cuando se carga el juego principal (necesita una mejor condición) -- Volver a aplicar anulaciones por si acaso AddTextEntry('FE_THDR_GTAO', ' ') AddTextEntry('PM_NAME_APP', ' ') AddTextEntry('PM_INFO_DET', ' ') AddTextEntry('LOADING_SPLAYER_L', ' ') AddTextEntry('DLC_ITEM_UNLOCK', ' ') -- Opcionalmente, ocultar el círculo de carga giratorio en la parte inferior derecha HideHudComponentThisFrame(14) -- HUD_LOADING_SPINNER fin fin) --]] -- Puedes agregar más lógica aquí si es necesario, por ejemplo, escuchar eventos del juego -- para enviar mensajes específicos a la pantalla de carga de tu NUI. -- Ejemplo: envía un mensaje cuando el jugador aparece (aunque la pantalla de carga generalmente ya ha desaparecido para ese entonces) -- AddEventHandler('playerSpawned', function() -- SendNUIMessage({ type = 'playerReady' }) -- end) print('[MyLoadingScreen] Script del cliente cargado.')</pre> <p class="wp-block-paragraph"><strong>Explicación:</strong></p> <ul class="wp-block-list"> <li><strong><code>Ciudadano.Espera(100)</code></strong>Un pequeño retraso. A veces, al intentar interactuar con la NUI o elementos del juego. <em>inmediatamente</em> Cuando el script se carga, puede fallar. Esto da tiempo para que todo se inicialice.</li> <li><strong><code>ApagadoCargandoPantallaNui()</code></strong>Esta es una función nativa de FiveM, diseñada específicamente para ocultar los elementos predeterminados de la interfaz de usuario de la pantalla de carga que proporciona el juego o FiveM. Suele ser la forma más sencilla y directa.</li> <li><strong><code>EnviarNUIMessage({ ... })</code></strong>:Un ejemplo que muestra cómo puedes enviar datos <em>de</em> Lua <em>a</em> Tu JavaScript. La tabla que pasas se convierte en la <code>evento.datos</code> objeto en tu <code>ventana.addEventListener('mensaje', ...)</code> oyente en <code>script.js</code>Podrías usar esto para activar acciones específicas o pasar información del servidor.</li> <li><strong>Método 2 (comentado):</strong> <ul class="wp-block-list"> <li>Proporciona un enfoque alternativo utilizando <code>Añadir entrada de texto</code>Esta función le permite anular las cadenas de texto predeterminadas del juego identificadas por sus claves (como <code>FE_THDR_GTAO</code>). Al colocarles un espacio (' '), los ocultas efectivamente.</li> <li>El <code>Ciudadano.CrearHilo</code> crea un hilo separado para esta tarea.</li> <li>El <code>Aunque es cierto</code> bucle (con <code>Ciudadano.Espera</code>) reaplica continuamente estas anulaciones. Esto puede ser más robusto contra el intento del juego de restablecer el texto, pero podría ser excesivo. También incluye <code>OcultarComponenteHudEsteMarco(14)</code> para ocultar el spinner.</li> <li><strong>Elegir <em>uno</em> método.</strong> Usando <code>ApagadoCargandoPantallaNui()</code> Generalmente se prefiere por simplicidad a menos que encuentres problemas donde los elementos predeterminados aún parpadean brevemente.</li> </ul> </li> <li><strong><code>imprimir(...)</code></strong>:Registra un mensaje en la consola F8 del cliente, útil para confirmar el script cargado.</li> </ul> <p class="wp-block-paragraph">Guarde este archivo como <code>cliente.lua</code>.</p> <h2 class="wp-block-heading" id="step-6-installing-and-running-the-loading-screen">Paso 6: Instalación y ejecución de la pantalla de carga</h2> <p class="wp-block-paragraph">Ahora que todas las piezas están creadas, poniéndolas en el servidor.</p> <ol class="wp-block-list"> <li><strong>Subir el recurso:</strong> <ul class="wp-block-list"> <li>Tomar el todo <code>mi pantalla de carga</code> carpeta (que ahora contiene <code>índice.html</code>, <code>estilo.css</code>, <code>script.js</code>, <code>fxmanifest.lua</code>, <code>cliente.lua</code>, y el <code>imágenes</code> y <code>audio</code> subcarpetas con su contenido).</li> <li>Sube esta carpeta completa a tu servidor FiveM <code>recursos</code> Directorio. Puedes usar un programa FTP (como FileZilla) o el panel web de tu servidor. La estructura debería ser similar a la siguiente: <code>[datos del servidor]/recursos/mi-pantalla-de-carga/</code>.</li> </ul> </li> <li><strong>Asegurar el recurso en <code>servidor.cfg</code>:</strong> <ul class="wp-block-list"> <li>Abra el archivo de configuración principal de su servidor, normalmente llamado <code>servidor.cfg</code>.</li> <li>Busque la sección donde se inician los recursos (líneas que generalmente comienzan con <code>asegurar</code> o <code>comenzar</code>).</li> <li>Agregue una línea para iniciar su recurso de pantalla de carga:<br><code>cfg # Pantalla de carga personalizada asegurar mi-pantalla-de-carga</code></li> <li><strong>La colocación importa un poco:</strong> Asegúrese de que esté en la lista <em>antes</em> recursos que pueden tardar mucho en cargarse si desea que la pantalla aparezca lo antes posible. Sin embargo, los recursos básicos <code>asegurar</code> suele ser suficiente. Hacer <em>no</em> Colóquelo dentro de cualquier <code>[categoría]</code> corchetes si desea que sea un recurso predeterminado.</li> </ul> </li> <li><strong>Reinicie su servidor:</strong> Para los cambios en <code>servidor.cfg</code> y para que el nuevo recurso sea reconocido, deberá reiniciar completamente su servidor FiveM.</li> <li><strong>Conectar y probar:</strong> Inicia FiveM y conéctate a tu servidor. ¡Ahora deberías ver tu pantalla de carga personalizada en lugar de la predeterminada! Prueba la barra de progreso (debería reaccionar a la carga de FiveM), los mensajes cambiantes y los controles de música. Revisa la consola F8 del juego para ver si hay algún error. <code>cliente.lua</code> o posibles problemas con NUI. Revise la consola del navegador (a menudo accesible mediante F8 -> Herramientas NUI o abriendo el HTML directamente) para detectar errores de JavaScript.</li> </ol> <h2 class="wp-block-heading" id="advanced-customization-ideas">Ideas de personalización avanzadas</h2> <p class="wp-block-paragraph">Una vez que los conceptos básicos funcionen, puedes explorar funciones más avanzadas:</p> <ul class="wp-block-list"> <li><strong>Vídeos de fondo:</strong> En lugar de una imagen estática, utilice un HTML <code><video></code> etiqueta. <ul class="wp-block-list"> <li>Agregar <code><video autoplay muted loop id="bg-video"></video></code> A tu <code>índice.html</code>.</li> <li>Estilo <code>#bg-vídeo</code> en CSS similar a la <code>.fondo</code> div (posición absoluta, 100% ancho/alto, <code>ajuste de objeto: cubierta</code>, <code>índice z: -1</code>).</li> <li><strong>Importante:</strong> Los videos aumentan significativamente el tamaño de la pantalla de carga. Optimízalos al máximo (resolución, tasa de bits). Usa formatos como <code>.mp4</code> (Códec H.264). Recuerda agregar el archivo de video a <code>fxmanifest.lua</code>La reproducción automática podría requerir <code>apagado</code> atributo inicialmente debido a las políticas del navegador; es posible que necesite JS para activar el silencio según la interacción del usuario (como hacer clic en el control de volumen).</li> </ul> </li> <li><strong>Obtención dinámica de reglas/mensajes del servidor:</strong> En lugar de codificar mensajes en JS, utilice <code>buscar</code> En tu <code>script.js</code> para cargar reglas o anuncios desde un <code>.json</code> archivo dentro de su recurso o incluso desde un servidor web/API externo. Esto facilita las actualizaciones.</li> <li><strong>Uso de marcos web:</strong> Utilice marcos CSS como Tailwind CSS o Bootstrap para un estilo más rápido, o marcos JavaScript como Vue.js o React para una lógica de UI más compleja (aunque esto agrega complejidad y pasos de compilación significativos).</li> <li><strong>Integraciones API:</strong> Obtener datos de API externas (p. ej., mostrar el número de jugadores en línea desde tu servidor de Discord usando un bot de Discord y un punto final de API simple). Esto requiere scripts del lado del servidor (<code>servidor.lua</code> en su recurso o en un servicio web separado) para manejarlo de forma segura.</li> <li><strong>Animaciones más sofisticadas:</strong> Utilice animaciones CSS (<code>@fotogramas clave</code>) o bibliotecas de animación de JavaScript (como GSAP) para transiciones más suaves, efectos de desvanecimiento o logotipos animados.</li> </ul> <h2 class="wp-block-heading" id="troubleshooting-common-issues">Solución de problemas comunes</h2> <ul class="wp-block-list"> <li><strong>La pantalla de carga no aparece:</strong> <ul class="wp-block-list"> <li>Controlar <code>servidor.cfg</code>: Es <code>asegurar mi pantalla de carga</code> ¿Está presente y escrito correctamente? ¿Hay algún error en la consola del servidor al iniciarse relacionado con el recurso?</li> <li>Controlar <code>fxmanifest.lua</code>:¿Es el? <code>pantalla de carga 'index.html'</code> ¿La línea es correcta? ¿Están <em>todo</em> archivos necesarios (HTML, CSS, JS, imágenes, audio) enumerados en el <code>archivos</code> ¿Bloquear? Revisa cuidadosamente los nombres de archivo y las rutas (en Linux, se distingue entre mayúsculas y minúsculas).</li> <li>Comprobar la estructura de la carpeta: ¿está la <code>mi pantalla de carga</code> carpeta directamente dentro de la <code>recursos</code> ¿carpeta?</li> </ul> </li> <li><strong>Estilos CSS no aplicados:</strong> <ul class="wp-block-list"> <li>Comprobar HTML <code></code> etiqueta: ¿Es el? <code>href="estilo.css"</code> ¿correcto?</li> <li>Controlar <code>fxmanifest.lua</code>: Es <code>estilo.css</code> listado en el <code>archivos</code> ¿bloquear?</li> <li>Verifique la sintaxis CSS: ¿Hay errores tipográficos o errores en su <code>estilo.css</code> ¿Archivo? Utilice un validador CSS.</li> <li>Caché del navegador: A veces, la caché NUI de FiveM conserva versiones antiguas. Borra la caché de FiveM (normalmente en <code>%localappdata%FiveMFiveM.appcache</code> En Windows, elimine carpetas como <code>navegador</code>, <code>base de datos</code>, <code>almacenamiento nui</code>) y reinicie FiveM.</li> </ul> </li> <li><strong>JavaScript no funciona (no hay progreso, no hay mensajes que cambien, no hay música):</strong> <ul class="wp-block-list"> <li>Comprobar HTML <code></code> etiqueta: ¿Es el? <code>src="script.js"</code> correcto y colocado en el <em>fin</em> del <code><body></code>?</li> <li>Controlar <code>fxmanifest.lua</code>: Es <code>script.js</code> listado en el <code>archivos</code> ¿bloquear?</li> <li>Verifique la consola del navegador: abra la consola F8 en FiveM, vaya a NUI Devtools (si está disponible) o abra el <code>índice.html</code> Directamente en un navegador y revisa la consola de desarrollador (generalmente F12) para detectar errores de JavaScript. Estos errores suelen identificar la línea del problema.</li> <li>Problemas de audio: ¿El archivo de música está en <code>.ogg</code> ¿Formato? ¿Está la ruta en <code>nuevo Audio(...)</code> ¿correcto? es <code>audio/tu_musica.ogg</code> ¿Aparece en el manifiesto? Recuerda las restricciones de reproducción automática del navegador: la música podría comenzar solo después de hacer clic en el botón de reproducción.</li> </ul> </li> <li><strong>La barra de progreso no se actualiza:</strong> <ul class="wp-block-list"> <li>¿Estás confiando en los eventos NUI de FiveM (<code>ventana.addEventListener('mensaje', ...)</code>? Asegúrese de que este código esté activo (no comentado).</li> <li>¿Los nombres de los eventos son (<code>estado de carga</code>, <code>progreso</code>, <code>fracción de carga</code>¿Correcto? A veces, estos valores pueden variar ligeramente entre actualizaciones de FiveM o versiones específicas del juego. Agregar <code>console.log(JSON.stringify(evento.datos))</code> dentro del receptor de mensajes para ver exactamente qué datos está enviando FiveM.</li> <li>¿El ID del elemento es (<code>barra de progreso interna</code>) ¿Es correcto tanto en HTML como en JS?</li> </ul> </li> <li><strong>Elementos de carga predeterminados de FiveM aún visibles:</strong> <ul class="wp-block-list"> <li>Controlar <code>cliente.lua</code>:¿Se está ejecutando el script? (verifique el <code>imprimir</code> mensaje en F8)? Es <code>ApagadoCargandoPantallaNui()</code> ¿Te llaman? Si usas <code>Añadir entrada de texto</code>¿Son correctas las claves para tu juego? Intenta aumentar la inicial. <code>Ciudadano.Espera()</code>.</li> </ul> </li> </ul> <h2 class="wp-block-heading" id="need-a-premium-solution-check-out-five-mx">¿Necesitas una solución premium? ¡Descubre FiveMX!</h2> <p class="wp-block-paragraph">Crear una pantalla de carga desde cero es gratificante, pero también puede llevar mucho tiempo, especialmente si quieres funciones avanzadas y un diseño muy pulido.</p> <p class="wp-block-paragraph">Si prefiere una solución profesional lista para usar, aquí en FiveMX lo tenemos cubierto.</p> <p class="wp-block-paragraph">Ofrecemos una selección curada de pantallas de carga premium ricas en funciones, diseñadas por desarrolladores experimentados.</p> <p class="wp-block-paragraph"><strong>Beneficios de las pantallas de carga pagadas de FiveMX:</strong></p> <ul class="wp-block-list"> <li><strong>Diseños profesionales:</strong> Estética visualmente impactante y moderna.</li> <li><strong>Funciones avanzadas:</strong> A menudo incluye videos de fondo, reproductores de música, múltiples secciones configurables, vistas previas de integración de Discord, indicadores de estado del servidor y más.</li> <li><strong>Fácil configuración:</strong> Generalmente vienen con archivos de configuración simples para personalizar texto, logotipos, enlaces y funciones sin necesidad de realizar cambios profundos en el código.</li> <li><strong>Confiabilidad y soporte:</strong> Probado para compatibilidad y a menudo viene con soporte para desarrolladores si encuentra problemas.</li> <li><strong>Ahorre tiempo y esfuerzo:</strong> Obtenga un resultado de alta calidad al instante, lo que le permitirá concentrarse en otros aspectos de su servidor.</li> </ul> <p class="wp-block-paragraph">Explora nuestra gama de interfaces y pantallas de carga para encontrar la que mejor se adapte a la identidad de tu servidor:</p> <ul class="wp-block-list"> <li>Categoría de pantallas de carga de FiveMX</li> <li>Colección de scripts FiveMX (la sección Interfaces a menudo incluye pantallas de carga)</li> </ul> <p class="wp-block-paragraph">Considere estas opciones populares disponibles en FiveMX:</p> <ol class="wp-block-list"> <li><strong>Pantalla de carga moderna V1</strong>:Una opción elegante y limpia para comenzar.</li> <li><strong>Pantalla de carga avanzada V6</strong>:Repleto de funciones para una personalización máxima.</li> <li><strong>Pantalla de carga única V13</strong>:Destaque con un diseño distintivo.</li> <li><strong>Pantalla de carga V16</strong>:Otra excelente opción con características modernas.</li> </ol> <p class="wp-block-paragraph">Invertir en una pantalla de carga premium puede mejorar significativamente la calidad percibida de su servidor y la experiencia del jugador desde el primer clic.</p> <h2 class="wp-block-heading" id="conclusion">Conclusión</h2> <p class="wp-block-paragraph">Creando una <strong>Pantalla de carga personalizada de FiveM</strong> es una forma poderosa de mejorar la identidad de su servidor y brindar una mejor experiencia de usuario.</p> <p class="wp-block-paragraph">Hemos recorrido el proceso de configuración de la estructura HTML, su estilo con CSS, la incorporación de un comportamiento dinámico con JavaScript y su integración en FiveM mediante el <code>fxmanifest.lua</code> y un simple <code>cliente.lua</code> Script para ocultar elementos predeterminados.</p> <p class="wp-block-paragraph">Recuerde que la clave es una gestión cuidadosa de los archivos (enumerar todo en el manifiesto), comprender cómo funcionan los eventos NUI para obtener actualizaciones de progreso reales y utilizar estándares web (HTML, CSS, JS).</p> <p class="wp-block-paragraph">No tengas miedo de experimentar con diferentes estilos, mensajes y medios.</p> <p class="wp-block-paragraph">Realice pruebas exhaustivas en su navegador y en el juego, utilizando las consolas de desarrollador para depurar problemas.</p> <p class="wp-block-paragraph">Ya sea que construyas tu propia obra maestra siguiendo esta guía o elijas una opción premium pulida de FiveMX.com, invertir en tu pantalla de carga es invertir en la primera impresión de tu servidor.</p> <p class="wp-block-paragraph">¡Feliz codificación y esperamos que esto te ayude a crear un punto de entrada increíble para tus jugadores!</p> <h2 class="wp-block-heading" id="frequently-asked-questions-faq">Preguntas frecuentes (FAQ)</h2> <p class="wp-block-paragraph"><strong>P1: ¿Puedo usar vídeos de fondo en lugar de imágenes?</strong></p> <p class="wp-block-paragraph">A: ¡Sí! Usa el HTML <code><video></code> etiqueta (<code><video autoplay muted loop id="bg-video"></video></code>). Dale estilo con CSS para cubrir la pantalla (<code>posición: absoluta</code>, <code>ancho: 100%</code>, <code>altura: 100%</code>, <code>ajuste de objeto: cubierta</code>, <code>índice z: -1</code>) Recuerda <code>silenciar</code> Para que la reproducción automática funcione de manera confiable, optimice considerablemente el tamaño del archivo de video, use formatos compatibles como MP4 (H.264) e incluya el archivo de video en su lista. <code>fxmanifest.lua</code>.</p> <p class="wp-block-paragraph"><strong>P2: ¿Cómo puedo hacer que la barra de progreso muestre el <em>actual</em> ¿Progreso de carga de FiveM?</strong></p> <p class="wp-block-paragraph">A: La forma más confiable es usar JavaScript. <code>ventana.addEventListener('mensaje', ...)</code> Para escuchar los mensajes NUI enviados por FiveM. Específicamente, busque un evento como <code>progreso</code> que a menudo contiene una <code>fracción de carga</code> propiedad (un valor de 0.0 a 1.0). Multiplíquelo por 100 y páselo a su <code>actualizarProgreso</code> Función de JavaScript. Evite confiar únicamente en el progreso simulado (como el <code>establecerIntervalo</code> ejemplo) para la versión final.</p> <p class="wp-block-paragraph"><strong>P3: ¿Dónde exactamente coloco los archivos de la pantalla de carga en mi servidor?</strong></p> <p class="wp-block-paragraph">A: Cree una carpeta dedicada para su recurso (por ejemplo, <code>mi pantalla de carga</code>) dentro del servidor principal de su servidor <code>recursos</code> directorio. Todos los archivos (<code>índice.html</code>, <code>estilo.css</code>, <code>script.js</code>, <code>fxmanifest.lua</code>, <code>cliente.lua</code>, y subcarpetas como <code>imágenes</code>, <code>audio</code>) debe ir dentro de esta carpeta de recursos.</p> <p class="wp-block-paragraph"><strong>P4: ¿Puedo tener música de fondo? ¿Cómo puedo añadir controles?</strong></p> <p class="wp-block-paragraph">A: Sí. Utilice el HTML <code><audio></code> etiquetar o crear una <code>Audio</code> objeto en JavaScript (<code>nuevo Audio('audio/musica.ogg')</code>). <strong>Es fundamental utilizar el <code>.ogg</code> formato de audio</strong> Para una mejor compatibilidad con FiveM NUI, agregue botones HTML estándar (<code><button></code>) y potencialmente una entrada de rango (<code></code>) para volumen en tu <code>índice.html</code>. Utilice detectores de eventos de JavaScript (<code>addEventListener</code>) en estos elementos para controlar el objeto de audio <code>.jugar()</code>, <code>.pausa()</code>, y <code>.volumen</code> Propiedades. Recuerde incluir el archivo de audio en su manifiesto.</p> <p class="wp-block-paragraph"><strong>Q5: ¿Por qué no aparece mi pantalla de carga?</strong></p> <p class="wp-block-paragraph">A: Verifique nuevamente estos culpables comunes:<br>1. ¿Está el recurso asegurado correctamente en <code>servidor.cfg</code> (<code>asegurar el nombre de la carpeta de recursos</code>)?<br>2. ¿Es el? <code>fxmanifest.lua</code> ¿presente en la carpeta de recursos?<br>3. ¿El manifiesto tiene la <code>pantalla de carga 'su_archivo_html.html'</code> ¿línea?<br>4. Son <em>todo</em> archivos necesarios (HTML, CSS, JS, imágenes, audio, fuentes) enumerados con precisión en <code>archivos { ... }</code> ¿En el manifiesto? Revisa las rutas y los nombres de archivo (¡distingue entre mayúsculas y minúsculas!).<br>5. ¿Hay algún error en la consola del servidor o en la consola F8 del cliente relacionado con la falla en la carga del recurso?<br>6. ¿Reiniciaste el servidor después de agregar el recurso y asegurarlo?</p> <p class="wp-block-paragraph"><strong>P6: ¿Cómo puedo hacer que la pantalla de carga desaparezca suavemente cuando se inicia el juego?</strong></p> <p class="wp-block-paragraph">R: Esto requiere comunicación entre tu script de Lua y la página NUI. FiveM no cuenta con un evento "carga completa, a punto de generar" perfectamente fiable y fácil de detectar. <em>antes</em> La NUI está destruida. Sin embargo, podrías:<br>1. Envíe un mensaje NUI personalizado (<code>SendNUIMessage({ tipo = 'cargandoCasiHecho' })</code>) de un script de cliente Lua basado en ciertos eventos del juego o temporizadores justo antes del inicio.<br>2. En tu JavaScript, escucha este mensaje (<code>si (evento.datos.tipo === 'cargandoCasiHecho')</code>).<br>3. Cuando lo reciba, active una animación de desvanecimiento CSS en su contenedor principal (<code>.loading-container.fade-out { opacidad: 0; transición: opacidad 1s salida fácil; }</code> y añade el <code>desvanecimiento</code> clase usando JS). Esto proporciona una transición visual, aunque FiveM podría eliminar la NUI abruptamente después.</p> <h2 class="wp-block-heading" id="p">Pantallas de carga pagadas</h2> <div data-wp-context="{"notices":[],"hideNextPreviousButtons":false,"isDisabledPrevious":true,"isDisabledNext":false,"ariaLabelPrevious":"Productos anteriores","ariaLabelNext":"Productos siguientes"}" data-wp-init="callbacks.onRender" data-wp-interactive="woocommerce/product-collection" data-wp-router-region="wc-product-collection-0" data-__private-preview-state="{"isPreview":false,"previewMessage":"Actual products will vary depending on the page being viewed."}" data-block-name="woocommerce/product-collection" data-dimensions="{"widthType":"fill"}" data-display-layout="{"type":"flex","columns":3,"shrinkColumns":true}" data-query-context-includes="["collection"]" data-query-id="0" data-query="{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{"product_cat":[537]},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":true,"relatedBy":{"categories":true,"tags":true}}" data-tag-name="div" class="wp-block-woocommerce-product-collection is-layout-flow wp-block-woocommerce-product-collection-is-layout-flow"> <div data-wp-interactive="woocommerce/store-notices" class="wc-block-components-notices alignwide"> <template data-wp-each--notice="state.notices" data-wp-each-key="context.notice.id"> <div class="wc-block-components-notice-banner" data-wp-init="callbacks.scrollIntoView" data-wp-class--is-error="state.isError" data-wp-class--is-success="state.isSuccess" data-wp-class--is-info="state.isInfo" data-wp-class--is-dismissible="context.notice.dismissible" data-wp-bind--role="state.role" data-wp-watch="callbacks.injectIcon" > <div class="wc-block-components-notice-banner__content"> <span data-wp-init="callbacks.renderNoticeContent" aria-live="assertive" aria-atomic="true"></span> </div> <button data-wp-bind--hidden="!context.notice.dismissible" class="wc-block-components-button wp-element-button wc-block-components-notice-banner__dismiss contained" aria-label="Descartar este aviso" data-wp-on--click="actions.removeNotice" data-no-translation-aria-label="" > <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"> <path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z" /> </svg> </button> </div> </template> </div> <ul data-block-name="woocommerce/product-template" class="wc-block-product-template__responsive columns-3 wc-block-product-template wp-block-woocommerce-product-template is-layout-flow wp-block-woocommerce-product-template-is-layout-flow" data-wp-on--scroll="actions.watchScroll" data-wp-init="callbacks.initResizeObserver"><li class="wc-block-product post-36322 product type-product status-publish has-post-thumbnail product_cat-fivem-loadingscreens product_cat-tools-ui first instock sale downloadable virtual taxable purchasable product-type-simple" data-wp-interactive="woocommerce/product-collection" data-wp-context='woocommerce/products::{"productId":36322,"variationId":null}' data-wp-key="product-item-36322" > <div data-block-name="woocommerce/product-image" data-image-sizing="thumbnail" data-is-descendent-of-query-loop="true" class="wc-block-components-product-image wc-block-grid__product-image wc-block-components-product-image--aspect-ratio-auto wp-block-woocommerce-product-image"><a href="https://fivemx.com/es/pantalla-de-carga-con-minijuego/" style="" data-wp-on--click="woocommerce/product-collection::actions.viewProduct"><div data-block-name="woocommerce/product-sale-badge" class="wp-block-woocommerce-product-sale-badge"><div class="wc-block-components-product-sale-badge alignright wc-block-components-product-sale-badge--align-right" style=""><span class="wc-block-components-product-sale-badge__text" aria-hidden="true" data-no-translation="" data-trp-gettext="">Oferta</span><span class="screen-reader-text" data-no-translation="" data-trp-gettext="">Producto en oferta</span></div></div><img decoding="async" width="500" height="281" src="https://cdn.fivemx.com/wp-content/uploads/2022/05/chrome_6iz9DuFAvd-jpg.avif" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="Pantalla de carga de FiveM" data-testid="product-image" data-image-id="36325" style="object-fit:cover;" loading="lazy" /><div class="wc-block-components-product-image__inner-container"></div></a></div> <h3 style="margin-bottom:0.75rem;margin-top:0" class="has-text-align-center wp-block-post-title has-medium-font-size"><a data-wp-on--click="woocommerce/product-collection::actions.viewProduct" href="https://fivemx.com/es/pantalla-de-carga-con-minijuego/" target="_self" >Pantalla de carga de UM (con minijuego)</a></h3> <div data-block-name="woocommerce/product-price" data-font-size="small" data-is-descendent-of-query-loop="true" data-text-align="center" class="has-font-size has-small-font-size has-text-align-center wp-block-woocommerce-product-price" ><div class="wc-block-components-product-price wc-block-grid__product-price" > <span class='yay-currency-cache-product-id' data-yay_currency-product-id='36322'><span class="sale-price"><del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" translate="no">$</span>14.99</bdi></span></del> <span class="screen-reader-text" data-no-translation="" data-trp-gettext="">El precio original era: $14.99.</span><ins aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" translate="no">$</span>11.99</bdi></span></ins><span class="screen-reader-text" data-no-translation="" data-trp-gettext="">El precio actual es: $11.99.</span></span></span> </div></div> <div data-background-color="black" data-block-name="woocommerce/product-button" data-font-size="small" data-is-descendent-of-query-loop="true" data-style="{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}" data-text-align="center" data-text-color="white" class="wp-block-button wc-block-components-product-button align-center wp-block-woocommerce-product-button has-small-font-size" data-wp-interactive="woocommerce/product-button" data-wp-context='{"quantityToAdd":1,"addToCartText":"A\u00f1adir al carrito","tempQuantity":0,"animationStatus":"IDLE","inTheCartText":"### en el carrito","noticeId":"","hasPressedButton":false}' > <button class="wp-block-button__link wp-element-button wc-block-components-product-button__button add_to_cart_button ajax_add_to_cart product_type_simple has-background has-black-background-color has-font-size has-small-font-size has-text-align-center has-text-color has-white-color wc-interactive" style="" type="button" data-product_id="36322" data-product_sku="" aria-label="Añadir al carrito: “UM Loading Screen (with Minigame)”" data-wp-on--click="actions.addCartItem" data-no-translation-aria-label="" > <span data-wp-text="state.addToCartText" data-wp-class--wc-block-slide-in="state.slideInAnimation" data-wp-class--wc-block-slide-out="state.slideOutAnimation" data-wp-on--animationend="actions.handleAnimationEnd" data-wp-watch="callbacks.startAnimation" data-wp-run="callbacks.syncTempQuantityOnLoad" data-no-translation="" data-trp-gettext="" >Añadir al carrito</span> </button> <span hidden data-wp-bind--hidden="!state.displayViewCart" > <a href="https://fivemx.com/es/carrito/" class="added_to_cart wc_forward" title="Ver carrito" data-no-translation-title="" > Ver carrito </a> </span> </div> </li><li class="wc-block-product post-206146 product type-product status-publish has-post-thumbnail product_cat-fivem-loadingscreens product_cat-tools-ui instock downloadable virtual purchasable product-type-simple" data-wp-interactive="woocommerce/product-collection" data-wp-context='woocommerce/products::{"productId":206146,"variationId":null}' data-wp-key="product-item-206146" > <div data-block-name="woocommerce/product-image" data-image-sizing="thumbnail" data-is-descendent-of-query-loop="true" class="wc-block-components-product-image wc-block-grid__product-image wc-block-components-product-image--aspect-ratio-auto wp-block-woocommerce-product-image"><a href="https://fivemx.com/es/codem-venice-loadingscreen/" style="" data-wp-on--click="woocommerce/product-collection::actions.viewProduct"><img decoding="async" width="500" height="375" src="https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-500x375.jpeg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="Venice Loading Screen | Seasonal NUI with Multi-Character Support FiveM resource preview" data-testid="product-image" data-image-id="208822" style="object-fit:cover;" loading="lazy" srcset="https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-500x375.jpeg 500w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-400x300.jpeg 400w" sizes="auto, (max-width: 500px) 100vw, 500px" /><div class="wc-block-components-product-image__inner-container"></div></a></div> <h3 style="margin-bottom:0.75rem;margin-top:0" class="has-text-align-center wp-block-post-title has-medium-font-size"><a data-wp-on--click="woocommerce/product-collection::actions.viewProduct" href="https://fivemx.com/es/codem-venice-loadingscreen/" target="_self" >Pantalla de Carga Venice | NUI de Temporada con Soporte para Múltiples Personajes</a></h3> <div data-block-name="woocommerce/product-price" data-font-size="small" data-is-descendent-of-query-loop="true" data-text-align="center" class="has-font-size has-small-font-size has-text-align-center wp-block-woocommerce-product-price" ><div class="wc-block-components-product-price wc-block-grid__product-price" > <span class='yay-currency-cache-product-id' data-yay_currency-product-id='206146'><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" translate="no">$</span>7.49</bdi></span></span> </div></div> <div data-background-color="black" data-block-name="woocommerce/product-button" data-font-size="small" data-is-descendent-of-query-loop="true" data-style="{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}" data-text-align="center" data-text-color="white" class="wp-block-button wc-block-components-product-button align-center wp-block-woocommerce-product-button has-small-font-size" data-wp-interactive="woocommerce/product-button" data-wp-context='{"quantityToAdd":1,"addToCartText":"A\u00f1adir al carrito","tempQuantity":0,"animationStatus":"IDLE","inTheCartText":"### en el carrito","noticeId":"","hasPressedButton":false}' > <button class="wp-block-button__link wp-element-button wc-block-components-product-button__button add_to_cart_button ajax_add_to_cart product_type_simple has-background has-black-background-color has-font-size has-small-font-size has-text-align-center has-text-color has-white-color wc-interactive" style="" type="button" data-product_id="206146" data-product_sku="" aria-label="Añadir al carrito: “Venice Loading Screen | Seasonal NUI with Multi-Character Support”" data-wp-on--click="actions.addCartItem" data-no-translation-aria-label="" > <span data-wp-text="state.addToCartText" data-wp-class--wc-block-slide-in="state.slideInAnimation" data-wp-class--wc-block-slide-out="state.slideOutAnimation" data-wp-on--animationend="actions.handleAnimationEnd" data-wp-watch="callbacks.startAnimation" data-wp-run="callbacks.syncTempQuantityOnLoad" data-no-translation="" data-trp-gettext="" >Añadir al carrito</span> </button> <span hidden data-wp-bind--hidden="!state.displayViewCart" > <a href="https://fivemx.com/es/carrito/" class="added_to_cart wc_forward" title="Ver carrito" data-no-translation-title="" > Ver carrito </a> </span> </div> </li><li class="wc-block-product post-15645 product type-product status-publish has-post-thumbnail product_cat-fivem-loadingscreens product_cat-tools-ui last instock sale downloadable virtual taxable purchasable product-type-simple" data-wp-interactive="woocommerce/product-collection" data-wp-context='woocommerce/products::{"productId":15645,"variationId":null}' data-wp-key="product-item-15645" > <div data-block-name="woocommerce/product-image" data-image-sizing="thumbnail" data-is-descendent-of-query-loop="true" class="wc-block-components-product-image wc-block-grid__product-image wc-block-components-product-image--aspect-ratio-auto wp-block-woocommerce-product-image"><a href="https://fivemx.com/es/pantalla-de-carga-de-la-leyenda-de-yume/" style="" data-wp-on--click="woocommerce/product-collection::actions.viewProduct"><div data-block-name="woocommerce/product-sale-badge" class="wp-block-woocommerce-product-sale-badge"><div class="wc-block-components-product-sale-badge alignright wc-block-components-product-sale-badge--align-right" style=""><span class="wc-block-components-product-sale-badge__text" aria-hidden="true" data-no-translation="" data-trp-gettext="">Oferta</span><span class="screen-reader-text" data-no-translation="" data-trp-gettext="">Producto en oferta</span></div></div><img decoding="async" width="500" height="184" src="https://cdn.fivemx.com/wp-content/uploads/2021/06/chrome_2021-06-22_12-50-52-scaled-scaled-jpg.avif" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="Yume Cargando" data-testid="product-image" data-image-id="15646" style="object-fit:cover;" loading="lazy" /><div class="wc-block-components-product-image__inner-container"></div></a></div> <h3 style="margin-bottom:0.75rem;margin-top:0" class="has-text-align-center wp-block-post-title has-medium-font-size"><a data-wp-on--click="woocommerce/product-collection::actions.viewProduct" href="https://fivemx.com/es/pantalla-de-carga-de-la-leyenda-de-yume/" target="_self" >Pantalla de carga de Yume Legend</a></h3> <div data-block-name="woocommerce/product-price" data-font-size="small" data-is-descendent-of-query-loop="true" data-text-align="center" class="has-font-size has-small-font-size has-text-align-center wp-block-woocommerce-product-price" ><div class="wc-block-components-product-price wc-block-grid__product-price" > <span class='yay-currency-cache-product-id' data-yay_currency-product-id='15645'><span class="sale-price"><del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" translate="no">$</span>32.99</bdi></span></del> <span class="screen-reader-text" data-no-translation="" data-trp-gettext="">El precio original era: $32.99.</span><ins aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" translate="no">$</span>19.99</bdi></span></ins><span class="screen-reader-text" data-no-translation="" data-trp-gettext="">El precio actual es: $19.99.</span></span></span> </div></div> <div data-background-color="black" data-block-name="woocommerce/product-button" data-font-size="small" data-is-descendent-of-query-loop="true" data-style="{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}" data-text-align="center" data-text-color="white" class="wp-block-button wc-block-components-product-button align-center wp-block-woocommerce-product-button has-small-font-size" data-wp-interactive="woocommerce/product-button" data-wp-context='{"quantityToAdd":1,"addToCartText":"A\u00f1adir al carrito","tempQuantity":0,"animationStatus":"IDLE","inTheCartText":"### en el carrito","noticeId":"","hasPressedButton":false}' > <button class="wp-block-button__link wp-element-button wc-block-components-product-button__button add_to_cart_button ajax_add_to_cart product_type_simple has-background has-black-background-color has-font-size has-small-font-size has-text-align-center has-text-color has-white-color wc-interactive" style="" type="button" data-product_id="15645" data-product_sku="" aria-label="Añadir al carrito: “Yume Legend Loading Screen”" data-wp-on--click="actions.addCartItem" data-no-translation-aria-label="" > <span data-wp-text="state.addToCartText" data-wp-class--wc-block-slide-in="state.slideInAnimation" data-wp-class--wc-block-slide-out="state.slideOutAnimation" data-wp-on--animationend="actions.handleAnimationEnd" data-wp-watch="callbacks.startAnimation" data-wp-run="callbacks.syncTempQuantityOnLoad" data-no-translation="" data-trp-gettext="" >Añadir al carrito</span> </button> <span hidden data-wp-bind--hidden="!state.displayViewCart" > <a href="https://fivemx.com/es/carrito/" class="added_to_cart wc_forward" title="Ver carrito" data-no-translation-title="" > Ver carrito </a> </span> </div> </li></ul> <nav class="wp-block-query-pagination is-content-justification-center is-layout-flex wp-container-core-query-pagination-is-layout-fe0a7de2 wp-block-query-pagination-is-layout-flex" aria-label="Paginación" data-no-translation-aria-label=""> <a data-wp-key="product-collection-pagination--previous" data-wp-on--click="woocommerce/product-collection::actions.navigate" data-wp-on--mouseenter="woocommerce/product-collection::actions.prefetchOnHover" data-wp-watch="woocommerce/product-collection::callbacks.prefetch" href="/es/?p=184927&query-0-page=1" class="wp-block-query-pagination-previous" data-no-translation="" data-trp-gettext="">Página anterior</a> <div class="wp-block-query-pagination-numbers"><a data-wp-key="product-collection-pagination-numbers--Página 1" data-wp-on--click="woocommerce/product-collection::actions.navigate" aria-label="Página 1" class="page-numbers" href="?cst&p=184927" data-no-translation-data-wp-key="" data-no-translation-aria-label="">1</a> <span aria-label="Página 2" aria-current="page" class="page-numbers current" data-no-translation-aria-label="">2</span></div> </nav> </div> <hr class="wp-block-separator has-alpha-channel-opacity" /> <h3 class="wp-block-heading" id="f">Pantallas de carga gratuitas</h3> <div class="wp-block-query is-layout-flow wp-block-query-is-layout-flow"><ul class="wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow"><li class="wp-block-post post-184133 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-loading-screens tag-free tag-loading"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure class="wp-block-post-featured-image"><a href="https://fivemx.com/es/pantalla-de-carga-informativa/" target="_self" ><img decoding="async" width="1920" height="1077" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Informative Loading Screen – Free FiveM Loading Scr…" style="object-fit:cover;" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file.jpeg 1920w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-300x168.jpeg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-1024x574.jpeg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-768x431.jpeg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-1536x862.jpeg 1536w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-18x10.jpeg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-110x62.jpeg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-60x34.jpeg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-800x449.jpeg 800w" sizes="auto, (max-width: 1920px) 100vw, 1920px" loading="lazy" /></a></figure></div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:75%"><h4 class="wp-block-post-title"><a href="https://fivemx.com/es/pantalla-de-carga-informativa/" target="_self" >Pantalla de carga informativa – Pantalla de carga FiveM gratuita…</a></h4></div> </div> </li><li class="wp-block-post post-184116 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-loading-screens tag-free tag-loading"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure class="wp-block-post-featured-image"><a href="https://fivemx.com/es/pantalla-de-carga-f1-v4/" target="_self" ><img decoding="async" width="1280" height="720" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="F1 LOADING-SCREEN V4 – Free FiveM Loading Screens" style="object-fit:cover;" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading.jpg 1280w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-300x169.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-1024x576.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-768x432.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-18x10.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-110x62.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-60x34.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/f1-loading-800x450.jpg 800w" sizes="auto, (max-width: 1280px) 100vw, 1280px" loading="lazy" /></a></figure></div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:75%"><h4 class="wp-block-post-title"><a href="https://fivemx.com/es/pantalla-de-carga-f1-v4/" target="_self" >F1 LOADING-SCREEN V4 – FiveM Loading Screens gratuito</a></h4></div> </div> </li><li class="wp-block-post post-184102 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-loading-screens tag-free tag-loading"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure class="wp-block-post-featured-image"><a href="https://fivemx.com/es/pantalla-de-carga-de-epic-loader-pro-fivem/" target="_self" ><img decoding="async" width="2560" height="1301" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Epic Loader Pro – Pantalla de carga premium de FiveM" style="object-fit:cover;" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled.jpg 2560w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-300x152.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-1024x520.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-768x390.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-1536x781.jpg 1536w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-2048x1041.jpg 2048w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-18x9.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-110x56.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-60x30.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/unnamed-file-scaled-800x407.jpg 800w" sizes="auto, (max-width: 2560px) 100vw, 2560px" loading="lazy" /></a></figure></div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:75%"><h4 class="wp-block-post-title"><a href="https://fivemx.com/es/pantalla-de-carga-de-epic-loader-pro-fivem/" target="_self" >Epic Loader Pro – Pantalla de carga premium de FiveM</a></h4></div> </div> </li><li class="wp-block-post post-179327 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-loading-screens category-scripts tag-fivem-script tag-free tag-free-script tag-loading"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure class="wp-block-post-featured-image"><a href="https://fivemx.com/es/pantalla-de-carga-de-afterlife-iv/" target="_self" ><img decoding="async" width="1920" height="1079" src="https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Afterlife IV Loading Screen – Free FiveM Loading Sc…" style="object-fit:cover;" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg.jpeg 1920w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-300x169.jpeg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-1024x575.jpeg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-768x432.jpeg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-1536x863.jpeg 1536w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-18x10.jpeg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-110x62.jpeg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-60x34.jpeg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/02/1d2cfa7e63ef22c81b57d1332b32857d48de29c7.jpeg-800x450.jpeg 800w" sizes="auto, (max-width: 1920px) 100vw, 1920px" loading="lazy" /></a></figure></div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:75%"><h4 class="wp-block-post-title"><a href="https://fivemx.com/es/pantalla-de-carga-de-afterlife-iv/" target="_self" >Pantalla de carga Afterlife IV – Pantalla de carga FiveM gratuita…</a></h4></div> </div> </li><li class="wp-block-post post-183818 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-loading-screens category-scripts tag-fivem-script tag-free tag-free-script tag-loading"> <div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"><figure class="wp-block-post-featured-image"><a href="https://fivemx.com/es/script-de-carga-avanzada/" target="_self" ><img decoding="async" width="1920" height="1080" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Advanced Loading Script – Free FiveM Loading Screens" style="object-fit:cover;" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1.jpg 1920w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-300x169.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-1024x576.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-768x432.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-1536x864.jpg 1536w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-18x10.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-110x62.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-60x34.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/Free-Loading-Screen-NCHub-1.jpg-1-800x450.jpg 800w" sizes="auto, (max-width: 1920px) 100vw, 1920px" loading="lazy" /></a></figure></div> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:75%"><h4 class="wp-block-post-title"><a href="https://fivemx.com/es/script-de-carga-avanzada/" target="_self" >Script de carga avanzado – FiveM Loading Screens gratuito</a></h4></div> </div> </li></ul></div> <hr class="wp-block-separator has-alpha-channel-opacity" /> <p class="wp-block-paragraph">¡Listo! ¿Tienes alguna pregunta? Deja un comentario.</p> <aside class="fivemx-blog-mobile" aria-labelledby="fivemx-blog-mobile-title"> <div class="fivemx-blog-mobile__inner"> <div> <span class="fivemx-blog-sidebar__eyebrow">Siguiente paso</span> <h2 id="fivemx-blog-mobile-title">Encuentra tu próximo guion FiveM</h2> <p>Explora scripts seleccionados, MLOs, paquetes de servidor y herramientas para servidores de rol en vivo.</p> <a class="fivemx-blog-sidebar__button" href="https://fivemx.com/es/guiones-fivem/"> Explorar FiveM Scripts </a> </div> <nav class="fivemx-blog-mobile__related" aria-label="Lecturas relacionadas"> <a href="https://fivemx.com/es/how-to-change-vehicle-handling/">Cómo cambiar el manejo del vehículo (FiveM)</a> <a href="https://fivemx.com/es/cinco-libras/">FivePD: La guía completa para principiantes (Configuración, Juego…)</a> <a href="https://fivemx.com/es/build-a-custom-phone-app/">Crea una aplicación móvil personalizada para el FiveM.</a> </nav> </div> </aside> </div> <div class="ct-share-box is-width-constrained ct-hidden-sm" data-location="bottom" data-type="type-2" > <span class="ct-module-title">Comparte esto</span> <div data-color="official" data-icons-type="custom:solid"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffivemx.com%2Fes%2Fcomo-crear-una-pantalla-de-carga-fivem-personalizada%2F" data-network="facebook" aria-label="Facebook" style="--official-color: #557dbc" rel="noopener noreferrer nofollow"> <span class="ct-tooltip" data-no-translation="" data-trp-gettext="">Compartir en Facebook</span><span class="ct-icon-container"> <svg width="20px" height="20px" viewbox="0 0 20 20" aria-hidden="true"> <path d="M20,10.1c0-5.5-4.5-10-10-10S0,4.5,0,10.1c0,5,3.7,9.1,8.4,9.9v-7H5.9v-2.9h2.5V7.9C8.4,5.4,9.9,4,12.2,4c1.1,0,2.2,0.2,2.2,0.2v2.5h-1.3c-1.2,0-1.6,0.8-1.6,1.6v1.9h2.8L13.9,13h-2.3v7C16.3,19.2,20,15.1,20,10.1z"/> </svg> </span> </a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Ffivemx.com%2Fes%2Fcomo-crear-una-pantalla-de-carga-fivem-personalizada%2F&text=How%20To%20Create%20a%20Custom%20FiveM%20Loading%20Screen" data-network="twitter" aria-label="X (Twitter)" style="--official-color: #000000" rel="noopener noreferrer nofollow"> <span class="ct-tooltip" data-no-translation="" data-trp-gettext="">Compartir en X (Twitter)</span><span class="ct-icon-container"> <svg width="20px" height="20px" viewbox="0 0 20 20" aria-hidden="true"> <path d="M2.9 0C1.3 0 0 1.3 0 2.9v14.3C0 18.7 1.3 20 2.9 20h14.3c1.6 0 2.9-1.3 2.9-2.9V2.9C20 1.3 18.7 0 17.1 0H2.9zm13.2 3.8L11.5 9l5.5 7.2h-4.3l-3.3-4.4-3.8 4.4H3.4l5-5.7-5.3-6.7h4.4l3 4 3.5-4h2.1zM14.4 15 6.8 5H5.6l7.7 10h1.1z"/> </svg> </span> </a> <a href="#" data-network="clipboard" aria-label="Copiar al portapapeles" style="--official-color: #2c3e50" rel="noopener noreferrer nofollow" data-no-translation-aria-label=""> <span class="ct-tooltip" data-no-translation="" data-trp-gettext="">Copiar al portapapeles</span><span class="ct-icon-container"> <svg width="20" height="20" viewbox="0 0 20 20" aria-hidden="true"> <path d="M20 3.89v6.667a3.89 3.89 0 0 1-3.89 3.89h-.55v-2.223h.55c.921 0 1.667-.746 1.667-1.667V3.889c0-.92-.746-1.666-1.666-1.666H9.443c-.92 0-1.667.746-1.667 1.666v6.668c0 .92.746 1.667 1.667 1.667h1.674v2.222H9.443a3.89 3.89 0 0 1-3.89-3.889V3.889A3.89 3.89 0 0 1 9.444 0h6.668A3.89 3.89 0 0 1 20 3.89Zm-9.443 1.664H8.891v2.222h1.666c.92 0 1.667.746 1.667 1.667v6.668c0 .92-.746 1.666-1.667 1.666H3.889c-.92 0-1.666-.746-1.666-1.666V9.443c0-.92.746-1.667 1.666-1.667h.55V5.554h-.55A3.89 3.89 0 0 0 0 9.443v6.668A3.89 3.89 0 0 0 3.89 20h6.667a3.89 3.89 0 0 0 3.89-3.89V9.444a3.89 3.89 0 0 0-3.89-3.89Z"/> </svg> </span> </a> <a href="https://reddit.com/submit?url=https%3A%2F%2Ffivemx.com%2Fes%2Fcomo-crear-una-pantalla-de-carga-fivem-personalizada%2F&title=How%20To%20Create%20a%20Custom%20FiveM%20Loading%20Screen" data-network="reddit" aria-label="Reddit" style="--official-color: #fc471e" rel="noopener noreferrer nofollow"> <span class="ct-tooltip" data-no-translation="" data-trp-gettext="">Compartir en Reddit</span><span class="ct-icon-container"> <svg width="20px" height="20px" viewbox="0 0 20 20" aria-hidden="true"> <path d="M11.7,0.9c-0.9,0-2,0.7-2.1,3.9c0.1,0,0.3,0,0.4,0c0.2,0,0.3,0,0.5,0c0.1-1.9,0.6-3.1,1.3-3.1c0.3,0,0.5,0.2,0.8,0.5c0.4,0.4,0.9,0.9,1.8,1.1c0-0.1,0-0.2,0-0.4c0-0.2,0-0.4,0.1-0.5c-0.6-0.2-0.9-0.5-1.2-0.8C12.8,1.3,12.4,0.9,11.7,0.9z M16.9,1.3c-1,0-1.7,0.8-1.7,1.7s0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7S17.9,1.3,16.9,1.3z M10,5.7c-5.3,0-9.5,2.7-9.5,6.5s4.3,6.9,9.5,6.9s9.5-3.1,9.5-6.9S15.3,5.7,10,5.7z M2.4,6.1c-0.6,0-1.2,0.3-1.7,0.7C0,7.5-0.2,8.6,0.2,9.5C0.9,8.2,2,7.1,3.5,6.3C3.1,6.2,2.8,6.1,2.4,6.1z M17.6,6.1c-0.4,0-0.7,0.1-1.1,0.3c1.5,0.8,2.6,1.9,3.2,3.2c0.4-0.9,0.3-2-0.5-2.7C18.8,6.3,18.2,6.1,17.6,6.1z M6.5,9.6c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3S5.8,9.6,6.5,9.6z M13.5,9.6c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3S12.8,9.6,13.5,9.6z M6.1,14.3c0.1,0,0.2,0.1,0.3,0.2c0,0.1,1.1,1.4,3.6,1.4c2.6,0,3.6-1.4,3.6-1.4c0.1-0.2,0.4-0.2,0.6-0.1c0.2,0.1,0.2,0.4,0.1,0.6c-0.1,0.1-1.3,1.8-4.3,1.8c-3,0-4.2-1.7-4.3-1.8c-0.1-0.2-0.1-0.5,0.1-0.6C5.9,14.4,6,14.3,6.1,14.3z"/> </svg> </span> </a> </div> </div> <div class="author-box is-width-constrained ct-hidden-sm" data-type="type-1" > <a href="https://fivemx.com/es/author/fivem/" class="ct-media-container"><img decoding="async" src="https://secure.gravatar.com/avatar/c64dda23fdd1ad33631818f4aa2a5b03ee7623521fabeb39a3505727e78da933?s=120&d=mm&r=g" width="60" height="60" alt="Lucas" style="aspect-ratio: 1/1;"> <svg width="18px" height="13px" viewbox="0 0 20 15"> <polygon points="14.5,2 13.6,2.9 17.6,6.9 0,6.9 0,8.1 17.6,8.1 13.6,12.1 14.5,13 20,7.5 "/> </svg> </a> <section> <h5 class="author-box-name"> Lucas </h5> <div class="author-box-bio"> <p>Soy Luke, gamer y me encanta escribir sobre FiveM, GTA y juegos de rol. Dirijo una comunidad de juegos de rol y tengo unos 10 años de experiencia administrando servidores.</p> </div> <div class="author-box-socials"><span><a href="https://fivemx.com/es/" aria-label="Icono de sitio web"><svg class="ct-icon" width="12" height="12" viewbox="0 0 20 20"><path d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm6.9 6H14c-.4-1.8-1.4-3.6-1.4-3.6s2.8.8 4.3 3.6zM10 2s1.2 1.7 1.9 4H8.1C8.8 3.6 10 2 10 2zM2.2 12s-.6-1.8 0-4h3.4c-.3 1.8 0 4 0 4H2.2zm.9 2H6c.6 2.3 1.4 3.6 1.4 3.6C4.3 16.5 3.1 14 3.1 14zM6 6H3.1c1.6-2.8 4.3-3.6 4.3-3.6S6.4 4.2 6 6zm4 12s-1.3-1.9-1.9-4h3.8c-.6 2.1-1.9 4-1.9 4zm2.3-6H7.7s-.3-2 0-4h4.7c.3 1.8-.1 4-.1 4zm.3 5.6s1-1.8 1.4-3.6h2.9c-1.6 2.7-4.3 3.6-4.3 3.6zm1.7-5.6s.3-2.1 0-4h3.4c.6 2.2 0 4 0 4h-3.4z"/></svg></a></span></div> <a href="https://fivemx.com/es/author/fivem/" class="ct-author-box-more">Artículos: 436</a> </section> </div> <nav class="post-navigation is-width-constrained" > <a href="https://fivemx.com/es/como-crear-una-escuela-de-conduccion-fivem/" class="nav-item-prev"> <figure class="ct-media-container"><img width="300" height="300" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-300x300.webp" class="attachment-medium size-medium wp-post-image" alt="Tienda FiveM" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-300x300.webp 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-150x150.webp 150w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-768x768.webp 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-12x12.webp 12w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-110x110.webp 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-60x60.webp 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-800x800.webp 800w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store-100x100.webp 100w, https://cdn.fivemx.com/wp-content/uploads/2025/04/fivem-store.webp 1024w" sizes="auto, (max-width: 300px) 100vw, 300px" itemprop="image" style="aspect-ratio: 1/1;" /><svg width="20px" height="15px" viewbox="0 0 20 15" fill="#ffffff"><polygon points="0,7.5 5.5,13 6.4,12.1 2.4,8.1 20,8.1 20,6.9 2.4,6.9 6.4,2.9 5.5,2 "/></svg></figure> <div class="item-content"> <span class="item-label"> <span>Entrada</span> anterior </span> <span class="item-title ct-hidden-sm"> Cómo crear una escuela de conducción en FiveM </span> </div> </a> <a href="https://fivemx.com/es/modulo-de-natacion-de-animales/" class="nav-item-next"> <div class="item-content"> <span class="item-label"> Siguiente <span>Entrada</span> </span> <span class="item-title ct-hidden-sm"> Animal Swim Module - Free FiveM Mods </span> </div> <figure class="ct-media-container"><img width="300" height="145" src="https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-300x145.webp" class="attachment-medium size-medium wp-post-image" alt="Animal Swim" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-300x145.webp 300w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-768x372.webp 768w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-18x9.webp 18w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-110x53.webp 110w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-60x29.webp 60w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script-800x387.webp 800w, https://cdn.fivemx.com/wp-content/uploads/2025/04/animalswim-script.webp 828w" sizes="auto, (max-width: 300px) 100vw, 300px" itemprop="image" style="aspect-ratio: 1/1;" /><svg width="20px" height="15px" viewbox="0 0 20 15" fill="#ffffff"><polygon points="14.5,2 13.6,2.9 17.6,6.9 0,6.9 0,8.1 17.6,8.1 13.6,12.1 14.5,13 20,7.5 "/></svg></figure> </a> </nav> </article> <aside class="ct-hidden-sm ct-hidden-md" data-type="type-1" id="sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"><div class="ct-sidebar" data-sticky="sidebar"><div class="fivemx-blog-sidebar"><section class="fivemx-blog-sidebar__card fivemx-blog-sidebar__toc" aria-labelledby="fivemx-blog-sidebar-toc"> <h2 id="fivemx-blog-sidebar-toc">En esta guía</h2> <ol> <li> <a href="#table-of-contents">Tabla de contenido</a> </li> <li> <a href="#what-is-a-loading-screen-resource">¿Qué es un recurso de pantalla de carga?</a> </li> <li> <a href="#why-bother-with-a-custom-five-m-loading-screen">¿Por qué molestarse con una pantalla de carga FiveM personalizada?</a> </li> <li> <a href="#prerequisites">Prerrequisitos</a> </li> <li> <a href="#understanding-how-five-m-loading-screens-work-nui">Cómo funcionan las pantallas de carga de FiveM (NUI)</a> </li> <li> <a href="#step-1-creating-the-basic-html-structure-index-html">Paso 1: Creación de la estructura HTML básica (index.html)</a> </li> <li> <a href="#step-2-styling-the-loading-screen-css-style-css">Paso 2: Estilizar la pantalla de carga (CSS – style.css)</a> </li> <li> <a href="#step-3-adding-interactivity-dynamic-content-java-script-script-js">Paso 3: Agregar interactividad y contenido dinámico (JavaScript – script.js)</a> </li> </ol> </section><section class="fivemx-blog-sidebar__card fivemx-blog-sidebar__cta" aria-labelledby="fivemx-blog-sidebar-cta"> <span class="fivemx-blog-sidebar__eyebrow">Siguiente paso</span> <h2 id="fivemx-blog-sidebar-cta">Encuentra tu próximo guion FiveM</h2> <p>Explora scripts seleccionados, MLOs, paquetes de servidor y herramientas para servidores de rol en vivo.</p> <a class="fivemx-blog-sidebar__button" href="https://fivemx.com/es/guiones-fivem/"> Explorar FiveM Scripts </a> </section><section class="fivemx-blog-sidebar__card fivemx-blog-sidebar__products" aria-labelledby="fivemx-blog-sidebar-products"> <div class="fivemx-blog-sidebar__section-head"> <span class="fivemx-blog-sidebar__eyebrow">Popular</span> <h2 id="fivemx-blog-sidebar-products">Recursos de pago</h2> </div> <ul> <li> <a class="fivemx-blog-sidebar__product" href="https://fivemx.com/es/hud-de-vehiculo-premium/"> <img class="fivemx-blog-sidebar__product-image" src="https://cdn.fivemx.com/wp-content/uploads/2020/12/Hud-png.avif" width="400" height="250" alt="HUD de vehículo premium"> <span class="fivemx-blog-sidebar__product-copy"> <strong>HUD de vehículo premium</strong> <span>$6.99</span> </span> </a> </li> <li> <a class="fivemx-blog-sidebar__product" href="https://fivemx.com/es/casas-de-lujo-vgcc-100-en-mirror-park/"> <img class="fivemx-blog-sidebar__product-image" src="https://cdn.fivemx.com/wp-content/uploads/2020/11/unknown11-png.avif" width="500" height="228" alt="Casas de lujo VGCC 100 en Mirror Park"> <span class="fivemx-blog-sidebar__product-copy"> <strong>Casas de lujo VGCC 100 en Mirror Park</strong> <span>$6.99</span> </span> </a> </li> <li> <a class="fivemx-blog-sidebar__product" href="https://fivemx.com/es/calles-europeas/"> <img class="fivemx-blog-sidebar__product-image" src="https://cdn.fivemx.com/wp-content/uploads/2020/12/unknown-14-png.avif" width="500" height="325" alt="FiveM Calles Europeas"> <span class="fivemx-blog-sidebar__product-copy"> <strong>FiveM Calles Europeas</strong> <span>$6.99</span> </span> </a> </li> </ul> <a class="fivemx-blog-sidebar__text-link" href="https://fivemx.com/es/guiones-fivem/"> Ver categoría </a> </section><section class="fivemx-blog-sidebar__card fivemx-blog-sidebar__related" aria-labelledby="fivemx-blog-sidebar-related"> <h2 id="fivemx-blog-sidebar-related">Lecturas relacionadas</h2> <ul> <li> <a href="https://fivemx.com/es/how-to-change-vehicle-handling/">Cómo cambiar el manejo del vehículo (FiveM)</a> </li> <li> <a href="https://fivemx.com/es/cinco-libras/">FivePD: La guía completa para principiantes (Configuración, Juego…)</a> </li> <li> <a href="https://fivemx.com/es/build-a-custom-phone-app/">Crea una aplicación móvil personalizada para el FiveM.</a> </li> <li> <a href="https://fivemx.com/es/how-to-play-fivem/">Cómo jugar a FiveM</a> </li> </ul> </section><section class="fivemx-blog-sidebar__card fivemx-blog-sidebar__search" aria-labelledby="fivemx-blog-sidebar-search-title"> <h2 id="fivemx-blog-sidebar-search-title">Buscar FiveMX</h2> <form role="search" method="get" action="https://fivemx.com/es/" data-trp-original-action="https://fivemx.com/es/"> <label class="screen-reader-text" for="fivemx-blog-sidebar-search-9518">Guías y recursos de búsqueda</label> <input id="fivemx-blog-sidebar-search-9518" type="search" name="s" value="" placeholder="Guías y recursos de búsqueda" autocomplete="off" > <input type="hidden" name="ct_post_type" value="post:page:product"> <button class="fivemx-blog-sidebar__search-submit" type="submit" title="Buscar" aria-label="Buscar"> <span class="fivemx-blog-sidebar__search-icon" aria-hidden="true"></span> </button> <input type="hidden" name="trp-form-language" value="es"/></form> </section></div></div></aside> </div> <div class="ct-related-posts-container" > <div class="ct-container"> <div class="ct-related-posts" > <h3 class="ct-module-title"> Entradas relacionadas </h3> <div class="ct-related-posts-items" data-layout="grid"> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div id="post-200178" class="post-200178 post type-post status-publish format-standard has-post-thumbnail hentry category-fivem-related category-tutorials tag-car tag-vehicle"><a class="ct-media-container" href="https://fivemx.com/es/how-to-change-vehicle-handling/" aria-label="Cómo cambiar el manejo del vehículo (FiveM)"><img width="768" height="768" src="https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-768x768.webp" class="attachment-medium_large size-medium_large wp-post-image" alt="Cómo cambiar el manejo del vehículo (FiveM)" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-768x768.webp 768w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-300x300.webp 300w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-150x150.webp 150w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-12x12.webp 12w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-110x110.webp 110w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-60x60.webp 60w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-800x800.webp 800w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling-100x100.webp 100w, https://cdn.fivemx.com/wp-content/uploads/2025/10/vehicle-handling.webp 1024w" sizes="auto, (max-width: 768px) 100vw, 768px" itemprop="image" style="aspect-ratio: 16/9;" /></a><h4 class="related-entry-title"><a href="https://fivemx.com/es/how-to-change-vehicle-handling/" rel="bookmark">Cómo cambiar el manejo del vehículo (FiveM)</a></h4><ul class="entry-meta" data-type="simple:slash" data-id="47f615" ><li class="meta-date" itemprop="datePublished"><time class="ct-meta-element-date" datetime="2025-10-17T09:12:49+02:00">17/10/2025</time></li></ul></div></article> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div id="post-200164" class="post-200164 post type-post status-publish format-standard has-post-thumbnail hentry category-free category-fivem-related category-scripts category-tutorials tag-fivem-script tag-free tag-free-script"><a class="ct-media-container" href="https://fivemx.com/es/cinco-libras/" aria-label="FivePD: La guía completa para principiantes (Configuración, Juego…)"><img width="768" height="512" src="https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-768x512.webp" class="attachment-medium_large size-medium_large wp-post-image" alt="FivePD: La guía completa para principiantes (Configuración, Juego…)" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-768x512.webp 768w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-300x200.webp 300w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-1024x683.webp 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-18x12.webp 18w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-110x73.webp 110w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-60x40.webp 60w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd-800x533.webp 800w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivepd.webp 1536w" sizes="auto, (max-width: 768px) 100vw, 768px" itemprop="image" style="aspect-ratio: 16/9;" /></a><h4 class="related-entry-title"><a href="https://fivemx.com/es/cinco-libras/" rel="bookmark">FivePD: La guía completa para principiantes (Configuración, Juego…)</a></h4><ul class="entry-meta" data-type="simple:slash" data-id="ff34e8" ><li class="meta-date" itemprop="datePublished"><time class="ct-meta-element-date" datetime="2025-10-17T08:40:54+02:00">17/10/2025</time></li></ul></div></article> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div id="post-199625" class="post-199625 post type-post status-publish format-standard has-post-thumbnail hentry category-lua-scripting category-tutorials tag-fivem-script"><a class="ct-media-container" href="https://fivemx.com/es/build-a-custom-phone-app/" aria-label="Crea una aplicación móvil personalizada para el FiveM."><img width="768" height="462" src="https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-768x462.jpg" class="attachment-medium_large size-medium_large wp-post-image" alt="Crea una aplicación móvil personalizada para el FiveM." loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-768x462.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-300x180.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-1024x615.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-1536x923.jpg 1536w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-18x12.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-110x66.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-60x36.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone-800x481.jpg 800w, https://cdn.fivemx.com/wp-content/uploads/2025/10/fivem-phone.jpg 1704w" sizes="auto, (max-width: 768px) 100vw, 768px" itemprop="image" style="aspect-ratio: 16/9;" /></a><h4 class="related-entry-title"><a href="https://fivemx.com/es/build-a-custom-phone-app/" rel="bookmark">Crea una aplicación móvil personalizada para el FiveM.</a></h4><ul class="entry-meta" data-type="simple:slash" data-id="2eeca3" ><li class="meta-date" itemprop="datePublished"><time class="ct-meta-element-date" datetime="2025-10-04T16:06:10+02:00">04/10/2025</time></li></ul></div></article> </div> </div> </div> </div> <div class="ct-comments-container"><div class="ct-container-narrow"> <div class="ct-comments" id="comments"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Deja un comentario<span class="ct-cancel-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/es/?p=184927&query-0-page=2#respond" style="display:none;" data-no-translation="" data-trp-gettext="">Cancelar respuesta</a></span></h2><p class="must-log-in" data-no-translation="" data-trp-gettext="">Lo siento, debes estar <a href="https://fivemx.com/wp-login.php?redirect_to=https%3A%2F%2Ffivemx.com%2Fes%2Fcomo-crear-una-pantalla-de-carga-fivem-personalizada%2F">conectado</a> para publicar un comentario.</p> </div><!-- #respond --> </div> </div></div> <section class="ct-trending-block ct-hidden-sm"> <div class="ct-container" data-page="1"> <h3 class="ct-module-title"> Tendencias<svg width="13" height="13" viewbox="0 0 13 13" fill="currentColor"><path d="M13 5.8V9c0 .4-.2.6-.5.6s-.5-.2-.5-.5V7.2l-4.3 4.2c-.2.2-.6.2-.8 0L4.6 9.1.9 12.8c-.1.1-.2.2-.4.2s-.3-.1-.4-.2c-.2-.2-.2-.6 0-.8l4.1-4.1c.2-.2.6-.2.8 0l2.3 2.3 3.8-3.8H9.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h3.4c.2 0 .3.1.4.2v.2z"/></svg> <span class="ct-slider-arrows"> <span class="ct-arrow-prev"> <svg width="8" height="8" fill="currentColor" viewbox="0 0 8 8"> <path d="M5.05555,8L1.05555,4,5.05555,0l.58667,1.12-2.88,2.88,2.88,2.88-.58667,1.12Z"/> </svg> </span> <span class="ct-arrow-next"> <svg width="8" height="8" fill="currentColor" viewbox="0 0 8 8"> <path d="M2.35778,6.88l2.88-2.88L2.35778,1.12,2.94445,0l4,4-4,4-.58667-1.12Z"/> </svg> </span> </span> </h3> <div class="ct-trending-block-item"><a class="ct-media-container" href="https://fivemx.com/es/how-to-create-a-fivem-server/" aria-label="Cómo crear un servidor FiveM en 2026"><img width="150" height="150" src="https://cdn.fivemx.com/wp-content/uploads/2025/08/create-fivem-server-150x150.jpeg" class="attachment-thumbnail size-thumbnail" alt="Cómo crear un servidor FiveM en 2026" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/08/create-fivem-server-150x150.jpeg 150w, https://cdn.fivemx.com/wp-content/uploads/2025/08/create-fivem-server-100x100.jpeg 100w" sizes="auto, (max-width: 150px) 100vw, 150px" itemprop="image" style="aspect-ratio: 1/1;" /></a><div class="ct-trending-block-item-content"><a href="https://fivemx.com/es/how-to-create-a-fivem-server/" class="ct-post-title">Cómo crear un servidor FiveM en 2026</a></div></div><div class="ct-trending-block-item"><a class="ct-media-container" href="https://fivemx.com/es/qbcore/" aria-label="Servidores y paquetes de servidores QBCore completos"><img width="150" height="95" src="https://cdn.fivemx.com/wp-content/uploads/2024/10/full-qbcore-servers-jpg.avif" class="attachment-thumbnail size-thumbnail" alt="Servidores y paquetes de servidores QBCore completos" loading="lazy" decoding="async" itemprop="image" style="aspect-ratio: 1/1;" /></a><div class="ct-trending-block-item-content"><a href="https://fivemx.com/es/qbcore/" class="ct-post-title">Servidores y paquetes de servidores QBCore completos</a></div></div><div class="ct-trending-block-item"><a class="ct-media-container" href="https://fivemx.com/es/fivem-hosting-provider-comparison/" aria-label="Comparación de proveedores de alojamiento de servidores FiveM"><img width="150" height="150" src="https://cdn.fivemx.com/wp-content/uploads/2025/03/server-hosting-fivem-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="Alojamiento de servidores FiveM" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2025/03/server-hosting-fivem-150x150.webp 150w, https://cdn.fivemx.com/wp-content/uploads/2025/03/server-hosting-fivem-100x100.webp 100w" sizes="auto, (max-width: 150px) 100vw, 150px" itemprop="image" style="aspect-ratio: 1/1;" /></a><div class="ct-trending-block-item-content"><a href="https://fivemx.com/es/fivem-hosting-provider-comparison/" class="ct-post-title">Comparación de proveedores de alojamiento de servidores FiveM</a></div></div><div class="ct-trending-block-item"><a class="ct-media-container" href="https://fivemx.com/es/guide-owning-growing-a-discord-server/" aria-label="La guía definitiva: Cómo tener y hacer crecer un servidor de Discord"><img width="150" height="150" src="https://cdn.fivemx.com/wp-content/uploads/2024/10/discord-server-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="La guía definitiva: Cómo tener y hacer crecer un servidor de Discord" loading="lazy" decoding="async" srcset="https://cdn.fivemx.com/wp-content/uploads/2024/10/discord-server-150x150.webp 150w, https://cdn.fivemx.com/wp-content/uploads/2024/10/discord-server-100x100.webp 100w" sizes="auto, (max-width: 150px) 100vw, 150px" itemprop="image" style="aspect-ratio: 1/1;" /></a><div class="ct-trending-block-item-content"><a href="https://fivemx.com/es/guide-owning-growing-a-discord-server/" class="ct-post-title">La guía definitiva: Cómo tener y hacer crecer un servidor de Discord</a></div></div> </div> </section> </main> <footer id="footer" class="ct-footer" data-id="type-1" itemscope="" itemtype="https://schema.org/WPFooter"><div data-row="top"><div class="ct-container"><div data-column="text"> <div class="ct-header-text" data-id="text"> <div class="entry-content is-layout-flow"> <h4>Acerca de fivemx</h4> <p>fivemx.com es la mejor fuente para encontrar las modificaciones que necesitas para tu nuevo FiveM.</p> </div> </div> </div></div></div><div data-row="middle"><div class="ct-container"><div data-column="menu"> <nav id="footer-menu" class="footer-menu-inline menu-container" data-id="menu" itemscope="" itemtype="https://schema.org/SiteNavigationElement" aria-label="Categorías del pie de página"> <ul id="menu-footer-categories" class="menu"><li id="menu-item-208793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208793"><a href="https://fivemx.com/es/guiones-fivem/" class="ct-menu-link">Scripts</a></li> <li id="menu-item-208794" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208794"><a href="https://fivemx.com/es/fivem-mlos/" class="ct-menu-link">MLOs y mapas</a></li> <li id="menu-item-208795" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208795"><a href="https://fivemx.com/es/guiones-de-trabajo-fivem/" class="ct-menu-link">Jobs y roleplay</a></li> <li id="menu-item-208796" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208796"><a href="https://fivemx.com/es/servidores-fivem/" class="ct-menu-link">Paquetes de servidor</a></li> <li id="menu-item-208797" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208797"><a href="https://fivemx.com/es/assets/" class="ct-menu-link">Assets</a></li> <li id="menu-item-208798" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208798"><a href="https://fivemx.com/es/tools-ui/" class="ct-menu-link">Tools y UI</a></li> <li id="menu-item-208799" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-208799"><a href="https://fivemx.com/es/scripts-fivem-gratuitos/" class="ct-menu-link">Recursos gratuitos</a></li> </ul></nav> </div><div data-column="search-input"> <div class="ct-search-box" data-id="search-input"> <form role="search" method="get" class="ct-search-form" data-form-controls="inside" data-taxonomy-filter="false" data-submit-button="minimal:icon" action="https://fivemx.com/es/" data-trp-original-action="https://fivemx.com/es/" > <div class="ct-search-form-inner ct-pseudo-input" > <input type="search" placeholder="Buscar" value="" name="s" autocomplete="off" title="Buscar..." aria-label="Buscar..." data-no-translation-placeholder="" data-no-translation-title="" data-no-translation-aria-label="" > <button type="submit" class="wp-element-button" aria-label="Botón de búsqueda" data-no-translation-aria-label=""> <svg class="ct-icon ct-search-button-content" aria-hidden="true" width="15" height="15" viewbox="0 0 15 15"><path d="M14.8,13.7L12,11c0.9-1.2,1.5-2.6,1.5-4.2c0-3.7-3-6.8-6.8-6.8S0,3,0,6.8s3,6.8,6.8,6.8c1.6,0,3.1-0.6,4.2-1.5l2.8,2.8c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2C15.1,14.5,15.1,14,14.8,13.7z M1.5,6.8c0-2.9,2.4-5.2,5.2-5.2S12,3.9,12,6.8S9.6,12,6.8,12S1.5,9.6,1.5,6.8z"/></svg> <span class="ct-ajax-loader"> <svg viewbox="0 0 24 24"> <circle cx="12" cy="12" r="10" opacity="0.2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/> <path d="m12,2c5.52,0,10,4.48,10,10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <animatetransform attributename="transform" attributetype="XML" type="rotate" dur="0.6s" from="0 12 12" to="360 12 12" repeatcount="indefinite" begin="indefinite" /> </path> </svg> </span> </button> <input type="hidden" name="ct_post_type" value="post:page:product"> </div> <input type="hidden" name="trp-form-language" value="es"/></form> </div> </div><div data-column="menu-secondary"> <nav id="footer-menu-2" class="footer-menu-inline menu-container" data-id="menu-secondary" itemscope="" itemtype="https://schema.org/SiteNavigationElement" aria-label="Pie de página - términos"> <ul id="menu-footer-terms" class="menu"><li id="menu-item-808" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-808"><a href="https://fivemx.com/es/terminos-y-condiciones/" class="ct-menu-link">Términos y condiciones</a></li> <li id="menu-item-810" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-810"><a href="https://fivemx.com/es/garantizar/" class="ct-menu-link">Política de reembolso</a></li> <li id="menu-item-809" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-809"><a href="https://fivemx.com/es/politica-de-privacidad/" class="ct-menu-link">política de privacidad</a></li> <li id="menu-item-208588" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-208588"><a href="https://fivemx.com/es/editorial-standards/" class="ct-menu-link">Normas editoriales</a></li> <li id="menu-item-208589" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-208589"><a href="https://fivemx.com/es/contact/" class="ct-menu-link">Contacto</a></li> </ul></nav> </div></div></div></footer></div> <template id="tp-language" data-tp-language="es_ES"></template> <script type="text/javascript"> (function() { 'use strict'; var proxyUrl = "https:\/\/fivemx.com\/es\/wp-json\/rmaf\/v1\/ai\/"; var nonce = "f0274f5897"; // Function to override the URL function overrideContentAIUrl() { if (typeof rankMath !== 'undefined' && rankMath.contentAI) { // Store original URL for reference if (!rankMath.contentAI._originalUrl) { rankMath.contentAI._originalUrl = rankMath.contentAI.url; } // Override with our proxy URL rankMath.contentAI.url = proxyUrl; // Also inject nonce for authentication rankMath.contentAI._rmafNonce = nonce; if (false) { console.log('[RMAF] Content AI URL overridden:', proxyUrl); } } } // Try to override immediately overrideContentAIUrl(); // Also override on DOMContentLoaded (in case rankMath loads later) document.addEventListener('DOMContentLoaded', overrideContentAIUrl); // And on window load as final fallback window.addEventListener('load', overrideContentAIUrl); // Set up a MutationObserver to catch dynamic script loading if (typeof MutationObserver !== 'undefined') { var observer = new MutationObserver(function(mutations) { overrideContentAIUrl(); }); observer.observe(document.documentElement, { childList: true, subtree: true }); // Disconnect after 10 seconds to prevent performance issues setTimeout(function() { observer.disconnect(); }, 10000); } // Intercept fetch globally to add our nonce header var originalFetch = window.fetch; window.fetch = function(url, options) { options = options || {}; // Check if this is a request to our proxy if (typeof url === 'string' && url.indexOf(proxyUrl) === 0) { options.headers = options.headers || {}; // Convert Headers object to plain object if needed if (options.headers instanceof Headers) { var plainHeaders = {}; options.headers.forEach(function(value, key) { plainHeaders[key] = value; }); options.headers = plainHeaders; } // Add WordPress REST API nonce options.headers['X-WP-Nonce'] = nonce; // Ensure credentials are included for authenticated requests options.credentials = options.credentials || 'same-origin'; } return originalFetch.call(this, url, options); }; // RankMath uses jQuery.ajax for Content AI tool calls. if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.ajaxPrefilter === 'function') { window.jQuery.ajaxPrefilter(function(options, originalOptions, jqXHR) { if (!options || typeof options.url !== 'string' || options.url.indexOf(proxyUrl) !== 0) { return; } jqXHR.setRequestHeader('X-WP-Nonce', nonce); }); } })(); </script> <nav class="fivemx-footer-hub" aria-label="FiveMX footer links" data-no-translation-aria-label=""> <div class="fivemx-footer-hub__inner"> <section class="fivemx-footer-hub__column" aria-labelledby="fivemx-footer-shop"> <h2 id="fivemx-footer-shop">Tienda</h2> <ul> <li><a href="https://fivemx.com/es/fivem-scripts/">Scripts FiveM</a></li> <li><a href="https://fivemx.com/es/esx-scripts/">Scripts de ESX</a></li> <li><a href="https://fivemx.com/es/qbcore-scripts/">Scripts de QBCore</a></li> <li><a href="https://fivemx.com/es/qbox-scripts/">Scripts de QBOX</a></li> <li><a href="https://fivemx.com/es/standalone-scripts/">Scripts independientes</a></li> <li><a href="https://fivemx.com/es/fivem-mlos/">MLO</a></li> <li><a href="https://fivemx.com/es/fivem-servers/">Paquetes de servidor</a></li> </ul> </section> <section class="fivemx-footer-hub__column" aria-labelledby="fivemx-footer-use-cases"> <h2 id="fivemx-footer-use-cases">Casos de uso</h2> <ul> <li><a href="https://fivemx.com/es/police-scripts/">Scripts policiales</a></li> <li><a href="https://fivemx.com/es/fivem-job-scripts/">Scripts de jobs</a></li> <li><a href="https://fivemx.com/es/fivem-medic-scripts/">Scripts médicos</a></li> <li><a href="https://fivemx.com/es/fivem-mechanic-jobs/">Trabajos de mecánico</a></li> <li><a href="https://fivemx.com/es/fivem-hud/">HUD</a></li> <li><a href="https://fivemx.com/es/fivem-cars/">Coches</a></li> </ul> </section> <section class="fivemx-footer-hub__column" aria-labelledby="fivemx-footer-resources"> <h2 id="fivemx-footer-resources">Recursos</h2> <ul> <li><a href="https://fivemx.com/es/tutorials/">Tutoriales</a></li> <li><a href="https://fivemx.com/es/how-to-create-a-fivem-server/">Cómo crear un servidor FiveM</a></li> <li><a href="https://fivemx.com/es/fivem-frameworks/">Marcos FiveM</a></li> <li><a href="https://fivemx.com/es/setting-up-qbcore-scripts/">Configuración de QBCore y Scripts</a></li> <li><a href="https://fivemx.com/es/free-fivem-scripts/">Scripts FiveM gratis</a></li> <li><a href="https://fivemx.com/es/free-fivem-mlos/">MLOs FiveM gratis</a></li> </ul> </section> <section class="fivemx-footer-hub__column" aria-labelledby="fivemx-footer-account"> <h2 id="fivemx-footer-account">Cuenta</h2> <ul> <li><a href="https://fivemx.com/es/my-account/">Mi cuenta</a></li> <li><a href="https://fivemx.com/es/cart/">Carrito</a></li> <li><a href="https://fivemx.com/es/checkout/">Finalizar compra</a></li> <li><a href="https://fivemx.com/es/shop/">Tienda</a></li> </ul> </section> </div> </nav> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/es/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/blocksy/*","/es/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="wp-importmap" type="importmap"> {"imports":{"@woocommerce/stores/woocommerce/cart":"https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/woocommerce/cart.js?ver=6ef41e00d2939992b95c","@woocommerce/stores/woocommerce/products":"https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/woocommerce/products.js?ver=d2328963c7e9ed84708e","@wordpress/interactivity":"https://fivemx.com/wp-includes/js/dist/script-modules/interactivity/index.min.js?ver=efaa5193bbad9c60ffd1","@wordpress/interactivity-router":"https://fivemx.com/wp-includes/js/dist/script-modules/interactivity-router/index.min.js?ver=71aa17bac91628a0f874","@woocommerce/stores/store-notices":"https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/store-notices.js?ver=c1eae8d5e518e3fbcf40","@wordpress/a11y":"https://fivemx.com/wp-includes/js/dist/script-modules/a11y/index.min.js?ver=1c371cb517a97cdbcb9f"}} </script> <script id="woocommerce/product-button-js-module" src="https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/woocommerce/product-button.js?ver=1ced8ea5bb9f2b4dbf13" type="module"></script> <script id="woocommerce/product-collection-js-module" src="https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/woocommerce/product-collection.js?ver=bd84586f6e7c6265faaf" type="module"></script> <link rel="modulepreload" href="https://fivemx.com/wp-includes/js/dist/script-modules/interactivity/index.min.js?ver=efaa5193bbad9c60ffd1" id="@wordpress/interactivity-js-modulepreload" data-wp-fetchpriority="low"> <link rel="modulepreload" href="https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/store-notices.js?ver=c1eae8d5e518e3fbcf40" id="@woocommerce/stores/store-notices-js-modulepreload"> <link rel="modulepreload" href="https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/woocommerce/products.js?ver=d2328963c7e9ed84708e" id="@woocommerce/stores/woocommerce/products-js-modulepreload"> <link rel="modulepreload" href="https://fivemx.com/wp-content/plugins/woocommerce/assets/client/blocks/@woocommerce/stores/woocommerce/cart.js?ver=6ef41e00d2939992b95c" id="@woocommerce/stores/woocommerce/cart-js-modulepreload"> <script id="wp-script-module-data-@wordpress/interactivity" type="application/json"> {"config":{"woocommerce":{"nonOptimisticProperties":[],"messages":{"addedToCartText":"Añadido al carrito"}}},"state":{"woocommerce":{"cart":{"items":[],"coupons":[],"fees":[],"totals":{"total_items":"0","total_items_tax":"0","total_fees":"0","total_fees_tax":"0","total_discount":"0","total_discount_tax":"0","total_shipping":null,"total_shipping_tax":null,"total_price":"0","total_tax":"0","tax_lines":[],"currency_code":"USD","currency_symbol":"$","currency_minor_unit":2,"currency_decimal_separator":".","currency_thousand_separator":",","currency_prefix":"$","currency_suffix":""},"shipping_address":{"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"DE-BW","postcode":"","country":"DE","phone":""},"billing_address":{"first_name":"","last_name":"","company":"","address_1":"","address_2":"","city":"","state":"DE-BW","postcode":"","country":"DE","email":"","phone":""},"needs_payment":false,"needs_shipping":false,"payment_requirements":["products"],"has_calculated_shipping":false,"shipping_rates":[],"items_count":0,"items_weight":0,"cross_sells":[],"errors":[],"payment_methods":["stripe_cc","stripe_applepay","stripe_googlepay"],"extensions":{"wc_stripe":{"cart":{"total":"0.00","subtotal":"0.00","totalCents":0,"subtotalCents":0,"needsShipping":false,"isEmpty":true,"currency":"USD","countryCode":"DE","lineItems":[],"shippingOptions":[],"selectedShippingMethod":"","paymentMethods":{"stripe_cc":{"id":"stripe_cc","enabled":true,"available":true},"stripe_applepay":{"id":"stripe_applepay","enabled":true,"available":true},"stripe_googlepay":{"id":"stripe_googlepay","enabled":true,"available":true},"stripe_payment_request":{"id":"stripe_payment_request","enabled":false,"available":false},"stripe_afterpay":{"id":"stripe_afterpay","enabled":false,"available":false},"stripe_affirm":{"id":"stripe_affirm","enabled":false,"available":false},"stripe_ach":{"id":"stripe_ach","enabled":false,"available":false},"stripe_ideal":{"id":"stripe_ideal","enabled":false,"available":false},"stripe_p24":{"id":"stripe_p24","enabled":false,"available":false},"stripe_klarna":{"id":"stripe_klarna","enabled":false,"available":false},"stripe_bancontact":{"id":"stripe_bancontact","enabled":false,"available":false},"stripe_eps":{"id":"stripe_eps","enabled":false,"available":false},"stripe_multibanco":{"id":"stripe_multibanco","enabled":false,"available":false},"stripe_sepa":{"id":"stripe_sepa","enabled":false,"available":false},"stripe_wechat":{"id":"stripe_wechat","enabled":false,"available":false},"stripe_fpx":{"id":"stripe_fpx","enabled":false,"available":false},"stripe_becs":{"id":"stripe_becs","enabled":false,"available":false},"stripe_alipay":{"id":"stripe_alipay","enabled":false,"available":false},"stripe_grabpay":{"id":"stripe_grabpay","enabled":false,"available":false},"stripe_boleto":{"id":"stripe_boleto","enabled":false,"available":false},"stripe_oxxo":{"id":"stripe_oxxo","enabled":false,"available":false},"stripe_blik":{"id":"stripe_blik","enabled":false,"available":false},"stripe_konbini":{"id":"stripe_konbini","enabled":false,"available":false},"stripe_paynow":{"id":"stripe_paynow","enabled":false,"available":false},"stripe_promptpay":{"id":"stripe_promptpay","enabled":false,"available":false},"stripe_swish":{"id":"stripe_swish","enabled":false,"available":false},"stripe_amazonpay":{"id":"stripe_amazonpay","enabled":false,"available":false},"stripe_cashapp":{"id":"stripe_cashapp","enabled":false,"available":false},"stripe_revolut":{"id":"stripe_revolut","enabled":false,"available":false},"stripe_zip":{"id":"stripe_zip","enabled":false,"available":false},"stripe_mobilepay":{"id":"stripe_mobilepay","enabled":false,"available":false},"stripe_twint":{"id":"stripe_twint","enabled":false,"available":false},"stripe_paybybank":{"id":"stripe_paybybank","enabled":false,"available":false},"stripe_upm":{"id":"stripe_upm","enabled":false,"available":false},"stripe_link_checkout":{"id":"stripe_link_checkout","enabled":false,"available":false},"stripe_billie":{"id":"stripe_billie","enabled":false,"available":false},"stripe_satispay":{"id":"stripe_satispay","enabled":false,"available":false},"stripe_scalapay":{"id":"stripe_scalapay","enabled":false,"available":false}}}}}},"noticeId":"","restUrl":"https://fivemx.com/es/wp-json/"},"woocommerce/product-button":{"addToCartText":{}},"woocommerce/products":{"mainProductInContext":{},"productVariationInContext":{},"productInContext":{},"products":{"36322":{"id":36322,"name":"UM Loading Screen (with Minigame)","slug":"um-loading-screen-with-minigame","parent":0,"type":"simple","variation":"","permalink":"https://fivemx.com/es/pantalla-de-carga-con-minijuego/","sku":"","short_description":"\u003Ch2\u003EFeatures\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003EOn the loading screen, the user sees their own steam information\u003C/li\u003E\n\u003Cli\u003E{Steam Web API}\u003C/li\u003E\n\u003Cli\u003EMinigame\u003C/li\u003E\n\u003Cli\u003EBackground Video {Youtube API}\u003C/li\u003E\n\u003Cli\u003ESnow effect\u003C/li\u003E\n\u003Cli\u003EFlexible config\u003C/li\u003E\n\u003C/ul\u003E","description":"\u003Cp\u003E\u003C!-- fivemx-description-quality-wave:2026-06-27 --\u003E\u003C/p\u003E\n\u003Ch2\u003EUM Loading Screen (with Minigame) overview\u003C/h2\u003E\n\u003Cp\u003EUM Loading Screen (with Minigame) is a FiveM gameplay script listed on FiveMX in Tools & UI, FiveM Loading Screens. No framework is confirmed by the current title or category labels, so verify dependencies in the package before using it live.\u003C/p\u003E\n\u003Ch2\u003EBest fit\u003C/h2\u003E\n\u003Cp\u003EUM Loading Screen (with Minigame) fits servers adding a specific gameplay loop where rewards, commands, items and dependencies should be tested before release.\u003C/p\u003E\n\u003Ch2\u003EBefore installing\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003EConfirm framework, dependencies, SQL files, config values and item names from the included package.\u003C/li\u003E\n\u003Cli\u003ETest commands, events, UI flow and server/client console output on staging first.\u003C/li\u003E\n\u003Cli\u003ECheck for conflicts with resources that already handle the same gameplay area.\u003C/li\u003E\n\u003Cli\u003EBack up edited resources, configs and database tables before replacing a live script.\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2\u003EExisting demo media\u003C/h2\u003E\n\u003Cp\u003E\u003Ca href=\"https://streamable.com/qvqzd4\"\u003EDemo media\u003C/a\u003E\u003C/p\u003E\n\u003Ch2\u003EProduct notes\u003C/h2\u003E\n\u003Cp\u003EFeatures On the loading screen, the user sees their own steam information {Steam Web API} Minigame Background Video {Youtube API} Snow effect Flexible config\u003C/p\u003E\n\u003Ch2\u003ERelated FiveMX paths\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/tools-ui/\"\u003ETools & UI\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/fivem-loadingscreens/\"\u003EFiveM Loading Screens\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/ks-loadingscreen/\"\u003EKS Loadingscreen\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/loading-screen-debux/\"\u003ELoading Screen (DebuX)\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/jakrino-loading-screen/\"\u003EJakrino Loading Screen\u003C/a\u003E\u003C/li\u003E\n\u003C/ul\u003E","on_sale":true,"prices":{"price":"1199","regular_price":"1499","sale_price":"1199","price_range":null,"currency_code":"USD","currency_symbol":"$","currency_minor_unit":2,"currency_decimal_separator":".","currency_thousand_separator":",","currency_prefix":"$","currency_suffix":""},"price_html":"\u003Cspan class=\"yay-currency-cache-product-id\" data-yay_currency-product-id=\"36322\"\u003E\u003Cspan class=\"sale-price\"\u003E\u003Cdel aria-hidden=\"true\"\u003E\u003Cspan class=\"woocommerce-Price-amount amount\"\u003E\u003Cspan class=\"woocommerce-Price-currencySymbol\"\u003E$\u003C/span\u003E14.99\u003C/span\u003E\u003C/del\u003E \u003Cspan class=\"screen-reader-text\"\u003EEl precio original era: $14.99.\u003C/span\u003E\u003Cins aria-hidden=\"true\"\u003E\u003Cspan class=\"woocommerce-Price-amount amount\"\u003E\u003Cspan class=\"woocommerce-Price-currencySymbol\"\u003E$\u003C/span\u003E11.99\u003C/span\u003E\u003C/ins\u003E\u003Cspan class=\"screen-reader-text\"\u003EEl precio actual es: $11.99.\u003C/span\u003E\u003C/span\u003E\u003C/span\u003E","average_rating":"0","review_count":0,"images":[{"id":36325,"src":"https://cdn.fivemx.com/wp-content/uploads/2022/05/chrome_6iz9DuFAvd-jpg.avif","thumbnail":"https://cdn.fivemx.com/wp-content/uploads/2022/05/chrome_6iz9DuFAvd-jpg.avif","srcset":"","sizes":"(max-width: 1265px) 100vw, 1265px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"FiveM Loading Screen","alt":"FiveM Loading Screen"},{"id":36324,"src":"https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ.jpg","thumbnail":"https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ.jpg","srcset":"https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ.jpg 1514w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-300x101.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-1024x344.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-768x258.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-18x6.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-110x37.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-60x20.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-800x269.jpg 800w","sizes":"(max-width: 1514px) 100vw, 1514px","thumbnail_srcset":"https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ.jpg 1514w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-300x101.jpg 300w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-1024x344.jpg 1024w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-768x258.jpg 768w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-18x6.jpg 18w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-110x37.jpg 110w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-60x20.jpg 60w, https://cdn.fivemx.com/wp-content/uploads/2022/05/notepad_vNDCd9hyWQ-800x269.jpg 800w","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"notepad++_vNDCd9hyWQ","alt":""}],"categories":[{"id":537,"name":"FiveM Loading Screens","slug":"fivem-loadingscreens","link":"https://fivemx.com/es/pantallas-de-carga-fivem/"},{"id":3014,"name":"Tools & UI","slug":"tools-ui","link":"https://fivemx.com/es/tools-ui/"}],"tags":[],"brands":[],"attributes":[],"variations":[],"grouped_products":[],"has_options":false,"is_purchasable":true,"is_in_stock":true,"is_on_backorder":false,"low_stock_remaining":null,"stock_availability":{"text":"","class":"in-stock"},"sold_individually":false,"weight":"","dimensions":{"length":"","width":"","height":""},"formatted_weight":"N/D","formatted_dimensions":"N/D","add_to_cart":{"text":"Añadir al carrito","description":"Añadir al carrito: “UM Loading Screen (with Minigame)”","url":"/es/?p=184927&query-0-page=2&add-to-cart=36322","single_text":"Añadir al carrito","minimum":1,"maximum":9999,"multiple_of":1},"is_password_protected":false,"extensions":{}},"206146":{"id":206146,"name":"Venice Loading Screen | Seasonal NUI with Multi-Character Support","slug":"codem-venice-loadingscreen","parent":0,"type":"simple","variation":"","permalink":"https://fivemx.com/es/codem-venice-loadingscreen/","sku":"","short_description":"\u003Cp\u003EPremium FiveM loading screen with 5 seasonal themes (Default, Spring, Summer, Fall, Winter), built-in music player, character selection integration, changelog viewer, and configurable NUI — all in one package.\u003C/p\u003E","description":"\u003Csection class=\"fivemx-product-section\"\u003EA complete, feature-rich FiveM loading screen with seasonal themes and deep customization. Part of the codem-venice package that also includes multi-character selection support.https://www.youtube.com/watch?v=yZhBefLky88\u003C/p\u003E\n\u003C/section\u003E\n\u003Csection class=\"fivemx-product-section\"\u003E\n\u003Ch2\u003EKey features\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003E5 Seasonal Themes:\u003C/strong\u003E Switch between Default, Spring, Summer, Fall, and Winter themes anytime on the loading screen.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EBuilt-in Music Player:\u003C/strong\u003E Album-based music playback with full playback controls integrated into the loading screen.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ECharacter Selection Integration:\u003C/strong\u003E Seamless transition from loading screen to character selection without manual intervention.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EChangelog Viewer:\u003C/strong\u003E Display server updates and patch notes directly on the loading screen for player visibility.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EDiscord Integration:\u003C/strong\u003E Show server Discord information with character art displayed on the loading screen.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EKeyboard Controls Display:\u003C/strong\u003E Reference display for server keybinds to help players learn control mappings.\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EInteractive NUI with Cursor Support:\u003C/strong\u003E Mouse-enabled interface providing full cursor support for interactive elements on the loading screen.\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/section\u003E\n\u003Csection class=\"fivemx-product-section\"\u003E\n\u003Ch2\u003ECompatibility\u003C/h2\u003E\n\u003Cp\u003E\u003Cstrong\u003EFrameworks:\u003C/strong\u003E Standalone\u003C/p\u003E\n\u003Cp\u003E\u003Cstrong\u003ERequirements:\u003C/strong\u003E Requires a FiveM server, access to server resources, and permission to restart the resource after configuration.\u003C/p\u003E\n\u003C/section\u003E\n\u003Csection class=\"fivemx-product-section\"\u003E\n\u003Ch2\u003EQuestions\u003C/h2\u003E\n\u003Ch3\u003EWhat seasonal themes are included?\u003C/h3\u003E\n\u003Cp\u003EThe loading screen includes 5 seasonal themes: Default, Spring, Summer, Fall, and Winter. You can switch between them anytime.\u003C/p\u003E\n\u003Ch3\u003EIs this loading screen part of a larger package?\u003C/h3\u003E\n\u003Cp\u003EYes, it is part of the codem-venice package which also includes multi-character selection support.\u003C/p\u003E\n\u003Ch3\u003EWhat resources are included with this product?\u003C/h3\u003E\n\u003Cp\u003ETwo resources are included: codem-venice-loadingscreen (the main loading screen resource) and codem-venice-core (a shared core library that is a required dependency).\u003C/p\u003E\n\u003Ch3\u003EWhat are the server requirements?\u003C/h3\u003E\n\u003Cp\u003EYour FiveM server must have /assetpacks enabled and support Lua 5.4.\u003C/p\u003E\n\u003C/section\u003E","on_sale":false,"prices":{"price":"749","regular_price":"749","sale_price":"749","price_range":null,"currency_code":"USD","currency_symbol":"$","currency_minor_unit":2,"currency_decimal_separator":".","currency_thousand_separator":",","currency_prefix":"$","currency_suffix":""},"price_html":"\u003Cspan class=\"yay-currency-cache-product-id\" data-yay_currency-product-id=\"206146\"\u003E\u003Cspan class=\"woocommerce-Price-amount amount\"\u003E\u003Cspan class=\"woocommerce-Price-currencySymbol\"\u003E$\u003C/span\u003E7.49\u003C/span\u003E\u003C/span\u003E","average_rating":"0","review_count":0,"images":[{"id":208822,"src":"https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen.jpeg","thumbnail":"https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-500x375.jpeg","srcset":"https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen.jpeg 1280w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-300x168.jpeg 300w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-1024x574.jpeg 1024w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-768x430.jpeg 768w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-18x10.jpeg 18w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-1200x672.jpeg 1200w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-110x62.jpeg 110w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-60x34.jpeg 60w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-320x179.jpeg 320w","sizes":"(max-width: 1280px) 100vw, 1280px","thumbnail_srcset":"https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-500x375.jpeg 500w, https://cdn.fivemx.com/wp-content/uploads/2026/06/venice-loading-screen-400x300.jpeg 400w","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"venice-loading-screen","alt":"Venice Loading Screen | Seasonal NUI with Multi-Character Support FiveM resource preview"},{"id":207505,"src":"https://cdn.fivemx.com/images/1775063149753-venice-ls-spring.png","thumbnail":"https://fivemx.com/wp-content/fivemx-cache/product-thumbs/207505-b2807e1fd0e2.webp","srcset":"","sizes":"(max-width: 800px) 100vw, 800px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 2","alt":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 2"},{"id":207506,"src":"https://cdn.fivemx.com/images/1775063149774-venice-ls-summer.png","thumbnail":"https://fivemx.com/wp-content/fivemx-cache/product-thumbs/207506-bd90dabb3059.webp","srcset":"","sizes":"(max-width: 800px) 100vw, 800px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 3","alt":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 3"},{"id":207507,"src":"https://cdn.fivemx.com/images/1775063149791-venice-ls-winter.png","thumbnail":"https://fivemx.com/wp-content/fivemx-cache/product-thumbs/207507-5616874ef95a.webp","srcset":"","sizes":"(max-width: 800px) 100vw, 800px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 4","alt":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 4"},{"id":207508,"src":"https://cdn.fivemx.com/images/1775063149795-venice-ls-fall.png","thumbnail":"https://fivemx.com/wp-content/fivemx-cache/product-thumbs/207508-b4c19c756a74.webp","srcset":"","sizes":"(max-width: 800px) 100vw, 800px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 5","alt":"Venice Loading Screen | Seasonal NUI with Multi-Character Support 5"}],"categories":[{"id":537,"name":"FiveM Loading Screens","slug":"fivem-loadingscreens","link":"https://fivemx.com/es/pantallas-de-carga-fivem/"},{"id":3014,"name":"Tools & UI","slug":"tools-ui","link":"https://fivemx.com/es/tools-ui/"}],"tags":[],"brands":[],"attributes":[{"id":0,"name":"Framework","taxonomy":null,"has_variations":false,"terms":[{"id":0,"name":"Standalone","slug":"Standalone"}]}],"variations":[],"grouped_products":[],"has_options":false,"is_purchasable":true,"is_in_stock":true,"is_on_backorder":false,"low_stock_remaining":null,"stock_availability":{"text":"","class":"in-stock"},"sold_individually":false,"weight":"","dimensions":{"length":"","width":"","height":""},"formatted_weight":"N/D","formatted_dimensions":"N/D","add_to_cart":{"text":"Añadir al carrito","description":"Añadir al carrito: “Venice Loading Screen | Seasonal NUI with Multi-Character Support”","url":"/es/?p=184927&query-0-page=2&add-to-cart=206146","single_text":"Añadir al carrito","minimum":1,"maximum":9999,"multiple_of":1},"is_password_protected":false,"extensions":{}},"15645":{"id":15645,"name":"Yume Legend Loading Screen","slug":"yume-legend-loading-screen","parent":0,"type":"simple","variation":"","permalink":"https://fivemx.com/es/pantalla-de-carga-de-la-leyenda-de-yume/","sku":"","short_description":"\u003Cp\u003EYume Legend Loading Screen is a FiveM resource in Tools & UI, FiveM Loading Screens. Verify the included files, dependencies and setup notes on staging before adding it to a live server.\u003C/p\u003E","description":"\u003Cp\u003E\u003C!-- fivemx-description-quality-wave:2026-06-27 --\u003E\u003C/p\u003E\n\u003Ch2\u003EYume Legend Loading Screen overview\u003C/h2\u003E\n\u003Cp\u003EYume Legend Loading Screen is a FiveM resource listed on FiveMX in Tools & UI, FiveM Loading Screens. No framework is confirmed by the current title or category labels, so verify dependencies in the package before using it live.\u003C/p\u003E\n\u003Ch2\u003EBest fit\u003C/h2\u003E\n\u003Cp\u003EYume Legend Loading Screen fits servers comparing a focused FiveM resource in Tools & UI, FiveM Loading Screens and checking whether it matches the current framework and resource stack.\u003C/p\u003E\n\u003Ch2\u003EBefore installing\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003EConfirm framework, dependencies and config files from the included package before installing.\u003C/li\u003E\n\u003Cli\u003ETest the resource on a staging server before enabling it for live players.\u003C/li\u003E\n\u003Cli\u003ECheck for conflicts with resources that already cover the same server role.\u003C/li\u003E\n\u003Cli\u003EBack up edited resources, configs and database tables before replacing anything live.\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2\u003EExisting demo media\u003C/h2\u003E\n\u003Cp\u003E\u003Ca href=\"https://www.youtube.com/watch?v=_poKgCdpqX0%5B/embed%5D\"\u003EDemo media\u003C/a\u003E\u003C/p\u003E\n\u003Ch2\u003EProduct notes\u003C/h2\u003E\n\u003Cp\u003E(with Minigame) Venice Loading Screen | Seasonal NUI with Multi-Character Support Loading Screen (DebuX).\u003C/p\u003E\n\u003Ch2\u003ERelated FiveMX paths\u003C/h2\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/tools-ui/\"\u003ETools & UI\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/fivem-loadingscreens/\"\u003EFiveM Loading Screens\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/ks-loadingscreen/\"\u003EKS Loadingscreen\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/loading-screen-debux/\"\u003ELoading Screen (DebuX)\u003C/a\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Ca href=\"https://fivemx.com/jakrino-loading-screen/\"\u003EJakrino Loading Screen\u003C/a\u003E\u003C/li\u003E\n\u003C/ul\u003E","on_sale":true,"prices":{"price":"1999","regular_price":"3299","sale_price":"1999","price_range":null,"currency_code":"USD","currency_symbol":"$","currency_minor_unit":2,"currency_decimal_separator":".","currency_thousand_separator":",","currency_prefix":"$","currency_suffix":""},"price_html":"\u003Cspan class=\"yay-currency-cache-product-id\" data-yay_currency-product-id=\"15645\"\u003E\u003Cspan class=\"sale-price\"\u003E\u003Cdel aria-hidden=\"true\"\u003E\u003Cspan class=\"woocommerce-Price-amount amount\"\u003E\u003Cspan class=\"woocommerce-Price-currencySymbol\"\u003E$\u003C/span\u003E32.99\u003C/span\u003E\u003C/del\u003E \u003Cspan class=\"screen-reader-text\"\u003EEl precio original era: $32.99.\u003C/span\u003E\u003Cins aria-hidden=\"true\"\u003E\u003Cspan class=\"woocommerce-Price-amount amount\"\u003E\u003Cspan class=\"woocommerce-Price-currencySymbol\"\u003E$\u003C/span\u003E19.99\u003C/span\u003E\u003C/ins\u003E\u003Cspan class=\"screen-reader-text\"\u003EEl precio actual es: $19.99.\u003C/span\u003E\u003C/span\u003E\u003C/span\u003E","average_rating":"0","review_count":0,"images":[{"id":15646,"src":"https://cdn.fivemx.com/wp-content/uploads/2021/06/chrome_2021-06-22_12-50-52-scaled-scaled-jpg.avif","thumbnail":"https://cdn.fivemx.com/wp-content/uploads/2021/06/chrome_2021-06-22_12-50-52-scaled-scaled-jpg.avif","srcset":"","sizes":"(max-width: 2048px) 100vw, 2048px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"Yume Loading","alt":"Yume Loading"},{"id":15647,"src":"https://cdn.fivemx.com/wp-content/uploads/2021/06/chrome_2021-06-22_12-51-41-jpg.avif","thumbnail":"https://cdn.fivemx.com/wp-content/uploads/2021/06/chrome_2021-06-22_12-51-41-jpg.avif","srcset":"","sizes":"(max-width: 1205px) 100vw, 1205px","thumbnail_srcset":"","thumbnail_sizes":"(max-width: 500px) 100vw, 500px","name":"chrome_2021-06-22_12-51-41","alt":""}],"categories":[{"id":537,"name":"FiveM Loading Screens","slug":"fivem-loadingscreens","link":"https://fivemx.com/es/pantallas-de-carga-fivem/"},{"id":3014,"name":"Tools & UI","slug":"tools-ui","link":"https://fivemx.com/es/tools-ui/"}],"tags":[],"brands":[],"attributes":[],"variations":[],"grouped_products":[],"has_options":false,"is_purchasable":true,"is_in_stock":true,"is_on_backorder":false,"low_stock_remaining":null,"stock_availability":{"text":"","class":"in-stock"},"sold_individually":false,"weight":"","dimensions":{"length":"","width":"","height":""},"formatted_weight":"N/D","formatted_dimensions":"N/D","add_to_cart":{"text":"Añadir al carrito","description":"Añadir al carrito: “Yume Legend Loading Screen”","url":"/es/?p=184927&query-0-page=2&add-to-cart=15645","single_text":"Añadir al carrito","minimum":1,"maximum":9999,"multiple_of":1},"is_password_protected":false,"extensions":{}}}},"woocommerce/store-notices":{"notices":[]},"core/router":{"url":"https://fivemx.com/es/?p=184927&query-0-page=2"}},"derivedStateClosures":{"woocommerce/product-button":["state.addToCartText"]}} </script> <script id="wp-script-module-data-@wordpress/interactivity-router" type="application/json"> {"i18n":{"loading":"Cargando página, espera.","loaded":"Página cargada."}} </script> <script> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <div class="wp-interactivity-router-loading-bar" data-wp-interactive="core/router/private" data-wp-class--start-animation="state.navigation.hasStarted" data-wp-class--finish-animation="state.navigation.hasFinished" ></div><script id="trp-dynamic-translator-js-extra"> var trp_data = {"trp_custom_ajax_url":"https://fivemx.com/wp-content/plugins/translatepress-multilingual/includes/trp-ajax.php","trp_wp_ajax_url":"https://fivemx.com/wp-admin/admin-ajax.php","trp_language_to_query":"es_ES","trp_original_language":"en_US","trp_current_language":"es_ES","trp_skip_selectors":["[data-no-translation]","[data-no-dynamic-translation]","[data-trp-translate-id-innertext]","script","style","head","trp-span","translate-press","#billing_country","#shipping_country","#billing_state","#shipping_state","#select2-billing_country-results","#select2-billing_state-results","#select2-shipping_country-results","#select2-shipping_state-results",".woocommerce-loop-product__title","[data-trp-translate-id]","[data-trpgettextoriginal]","[data-trp-post-slug]"],"trp_base_selectors":["data-trp-translate-id","data-trpgettextoriginal","data-trp-post-slug"],"trp_attributes_selectors":{"text":{"accessor":"outertext","attribute":false},"block":{"accessor":"innertext","attribute":false},"image_src":{"selector":"img[src]","accessor":"src","attribute":true},"submit":{"selector":"input[type='submit'],input[type='button'], input[type='reset']","accessor":"value","attribute":true},"placeholder":{"selector":"input[placeholder],textarea[placeholder]","accessor":"placeholder","attribute":true},"title":{"selector":"[title]","accessor":"title","attribute":true},"a_href":{"selector":"a[href]","accessor":"href","attribute":true},"button":{"accessor":"outertext","attribute":false},"option":{"accessor":"innertext","attribute":false},"aria_label":{"selector":"[aria-label]","accessor":"aria-label","attribute":true},"video_src":{"selector":"video[src]","accessor":"src","attribute":true},"video_poster":{"selector":"video[poster]","accessor":"poster","attribute":true},"video_source_src":{"selector":"video source[src]","accessor":"src","attribute":true},"audio_src":{"selector":"audio[src]","accessor":"src","attribute":true},"audio_source_src":{"selector":"audio source[src]","accessor":"src","attribute":true},"picture_image_src":{"selector":"picture image[src]","accessor":"src","attribute":true},"picture_source_srcset":{"selector":"picture source[srcset]","accessor":"srcset","attribute":true},"image_alt":{"selector":"img[alt]","accessor":"alt","attribute":true},"meta_desc":{"selector":"meta[name=\"description\"],meta[property=\"og:title\"],meta[property=\"og:description\"],meta[property=\"og:site_name\"],meta[property=\"og:image:alt\"],meta[name=\"twitter:title\"],meta[name=\"twitter:description\"],meta[name=\"twitter:image:alt\"],meta[name=\"DC.Title\"],meta[name=\"DC.Description\"],meta[property=\"article:section\"],meta[property=\"article:tag\"]","accessor":"content","attribute":true},"page_title":{"selector":"title","accessor":"innertext","attribute":false},"meta_desc_img":{"selector":"meta[property=\"og:image\"],meta[property=\"og:image:secure_url\"],meta[name=\"twitter:image\"]","accessor":"content","attribute":true}},"trp_attributes_accessors":["outertext","innertext","src","value","placeholder","title","href","aria-label","poster","srcset","alt","content"],"gettranslationsnonceregular":"c99e4cb731","showdynamiccontentbeforetranslation":"","skip_strings_from_dynamic_translation":[],"skip_strings_from_dynamic_translation_for_substrings":{"href":["amazon-adsystem","googleads","g.doubleclick"]},"duplicate_detections_allowed":"100","trp_translate_numerals_opt":"no","trp_no_auto_translation_selectors":["[data-no-auto-translation]"]}; //# sourceURL=trp-dynamic-translator-js-extra </script> <script id="trp-dynamic-translator-js" defer src="https://fivemx.com/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js?ver=3.2.2"></script> <script id="ct-scripts-js-extra"> var ct_localizations = {"ajax_url":"https://fivemx.com/wp-admin/admin-ajax.php","public_url":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/","rest_url":"https://fivemx.com/es/wp-json/","search_url":"https://fivemx.com/es/search/QUERY_STRING/","show_more_text":"Mostrar m\u00e1s","more_text":"M\u00e1s","search_live_results":"Resultados de b\u00fasqueda","search_live_no_results":"Sin resultados","search_live_results_closed":"Se han cerrado los resultados de la b\u00fasqueda.","search_live_no_result":"Sin resultados","search_live_one_result":"Obtuviste %s resultado. Por favor, pulsa en la pesta\u00f1a para seleccionarlo.","search_live_many_results":"Obtuviste %s resultados. Por favor, pulsa en la pesta\u00f1a para seleccionar uno.","search_live_stock_status_texts":{"instock":"Hay existencias","outofstock":"Agotado"},"clipboard_copied":"\u00a1Copiado!","clipboard_failed":"Error al copiar","expand_submenu":"Abrir el men\u00fa desplegable","collapse_submenu":"Cerrar el men\u00fa desplegable","dynamic_js_chunks":[{"id":"blocksy_pro_micro_popups","selector":".ct-popup","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/static/bundle/micro-popups.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_floating_cart","selector":".ct-floating-bar","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/floating-cart.js?ver=2.1.46","trigger":[{"selector":".ct-floating-bar .quantity .qty, .ct-cart-actions .quantity .qty","trigger":"dom-event","events":["input"]},{"selector":".ct-floating-bar","trigger":"intersection-observer"}],"position":"bottom","target":".single-product #main-container .single_add_to_cart_button","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_quick_view","selector":".ct-open-quick-view, [data-quick-view=\"image\"] .ct-media-container, [data-quick-view=\"card\"] \u003E .type-product","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/quick-view.js?ver=2.1.46","deps":["underscore","wc-add-to-cart-variation","wp-util"],"global_data":[{"var":"wc_add_to_cart_variation_params","data":{"wc_ajax_url":"https://fivemx.com/es/?wc-ajax=%%endpoint%%","i18n_no_matching_variations_text":"Sorry, no products matched your selection. Please choose a different combination.","i18n_make_a_selection_text":"Please select some product options before adding this product to your cart.","i18n_unavailable_text":"Sorry, this product is unavailable. Please choose a different combination."}}],"trigger":"click","ignore_click":"[data-quick-view='card'] \u003E * [data-product_id], [data-quick-view='card'] \u003E * .added_to_cart, [data-quick-view='card'] \u003E * .ct-woo-card-extra \u003E *","has_loader":{"type":"button","class":"quick-view-modal"},"version":"2.1.46","deps_data":{"underscore":"https://fivemx.com/wp-includes/js/underscore.min.js","wc-add-to-cart-variation":"https://fivemx.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js","wp-util":"https://fivemx.com/wp-includes/js/wp-util.min.js"}},{"id":"blocksy_ext_woo_extra_price_filters","selector":".ct-price-filter","trigger":[{"trigger":"dom-event","events":["change","input"],"selector":".ct-price-filter-slider input[type=\"range\"]"},{"trigger":"dom-event","events":["blur","focus","keypress"],"selector":".ct-price-filter-inputs input[type=\"number\"]"},{"trigger":"click","selector":".ct-price-filter-range-track"}],"url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/price-filter-public.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_ajax_filters","selector":"body:not([data-ajax-filters*=\"yes\"])","trigger":[{"trigger":"dom-event","events":["change"],"selector":".ct-filter-item [type=\"checkbox\"]"},{"trigger":"click","selector":".ct-filter-item a"}],"url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/ajax-filter-public.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_filters_search","selector":".ct-filter-widget-wrapper input[type=\"search\"]","trigger":{"trigger":"dom-event","events":["input"],"selector":".ct-filter-widget-wrapper input[type=\"search\"]"},"url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/filter-search.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_filters_lookup_progress","selector":".ct-filter-widget-admin-notice","trigger":"slight-mousemove","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/filter-lookup-progress.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_wish_list","selector":"[class*=\"ct-wishlist-button\"], .ct-wishlist-remove, .wishlist-product-remove \u003E .remove, .wishlist-product-name .product-mobile-actions \u003E .remove","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/wish-list.js?ver=2.1.46","trigger":"click","has_loader":{"type":"button"},"version":"2.1.46"},{"id":"blocksy_ext_woo_extra_suggested_products","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/update-suggested-products.js?ver=2.1.46","trigger":{"trigger":"jquery-event","matchTarget":false,"events":["added_to_cart","updated_checkout"]},"selector":"body","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_cart_reserved_timer","selector":"[class*=\"ct-cart-reserved-timer\"]","mountOnLoad":true,"trigger":[{"trigger":"slight-mousemove","selector":"[class*=\"ct-cart-reserved-timer\"]"},{"selector":"[class*=\"ct-cart-reserved-timer\"]","trigger":"jquery-event","matchTarget":false,"events":["added_to_cart","removed_from_cart","wc_fragments_refreshed","updated_cart_totals"]}],"url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/cart-reserved-timer.js?ver=2.1.46","version":"2.1.46"},{"id":"blocksy_ext_woo_extra_countdown","selector":".product .ct-product-sale-countdown","trigger":[{"trigger":"slight-mousemove","selector":".product .ct-product-sale-countdown [data-date]"},{"selector":".ct-product-sale-countdown","trigger":"jquery-event","events":["found_variation","reset_data"]}],"url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/product-sale-countdown.js?ver=2.1.46","global_data":[{"var":"blc_woo_extra_product_sale_countdown","data":{"days_label":"Days","hours_label":"Hours","min_label":"Min","sec_label":"Sec"}}],"version":"2.1.46"},{"id":"blocksy_ext_trending","selector":".ct-trending-block [class*=\"ct-arrow\"]","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/extensions/trending/static/bundle/main.js?ver=2.1.46","trigger":"click","version":"2.1.46"},{"id":"blocksy_account","selector":".ct-account-item[href*=\"account-modal\"], .must-log-in a","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/static/bundle/account.js?ver=2.1.46","deps":["blocksy-zxcvbn","wp-hooks","wp-i18n","password-strength-meter"],"global_data":[{"var":"wc_password_strength_meter_params","data":{"min_password_strength":3,"stop_checkout":false,"i18n_password_error":"Please enter a stronger password.","i18n_password_hint":"Sugerencia: La contrase\u00f1a debe ser de al menos doce caracteres. Para hacerla m\u00e1s fuerte usa may\u00fasculas y min\u00fasculas, n\u00fameros y s\u00edmbolos como ! \\\" ? $ % ^ y )."}},{"var":"pwsL10n","data":{"unknown":"Password strength unknown","short":"Very weak","bad":"Weak","good":"Medium","strong":"Strong","mismatch":"Mismatch"}}],"trigger":"click","version":"2.1.46","deps_data":{"blocksy-zxcvbn":"https://fivemx.com/wp-includes/js/zxcvbn.min.js","wp-hooks":"https://fivemx.com/wp-includes/js/dist/hooks.min.js","wp-i18n":"https://fivemx.com/wp-includes/js/dist/i18n.min.js","password-strength-meter":"https://fivemx.com/wp-admin/js/password-strength-meter.min.js"}},{"id":"blocksy_sticky_header","selector":"header [data-sticky]","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/static/bundle/sticky.js?ver=2.1.46","version":"2.1.46"}],"dynamic_styles":{"lazy_load":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/non-critical-styles.min.css?ver=2.1.47","search_lazy":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/non-critical-search-styles.min.css?ver=2.1.47","back_to_top":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/back-to-top.min.css?ver=2.1.47","additional_actions":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/additional-actions.min.css?ver=2.1.46"},"dynamic_styles_selectors":[{"selector":".ct-header-cart, #woo-cart-panel","url":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/cart-header-element-lazy.min.css?ver=2.1.47"},{"selector":".flexy","url":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/flexy.min.css?ver=2.1.47"},{"selector":".ct-pagination","url":"https://fivemx.com/wp-content/themes/blocksy/static/bundle/pagination.min.css?ver=2.1.47"},{"selector":".ct-media-container[data-media-id], .ct-dynamic-media[data-media-id]","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/static/bundle/video-lazy.min.css?ver=2.1.47"},{"selector":".product","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/quick-view-lazy.min.css?ver=2.1.47"},{"selector":".ct-suggested-products--mini-cart","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/framework/premium/extensions/woocommerce-extra/static/bundle/suggested-products.min.css?ver=2.1.46"},{"selector":"#account-modal","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/static/bundle/header-account-modal-lazy.min.css?ver=2.1.46"},{"selector":".ct-header-account","url":"https://fivemx.com/wp-content/plugins/blocksy-companion-pro/static/bundle/header-account-dropdown-lazy.min.css?ver=2.1.46"}],"blocksy_woo_extra_price_filters":{"currency":"$","priceFormat":"%1$s%2$s","delimiter":".","thousand":","},"blc_ext_wish_list":{"user_logged_in":"no","list":{"v":2,"items":[]}},"login_generic_error_msg":"An unexpected error occurred. Please try again later."}; //# sourceURL=ct-scripts-js-extra </script> <script id="ct-scripts-js" defer src="https://fivemx.com/wp-content/themes/blocksy/static/bundle/main.js?ver=2.1.47"></script> <script async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://fivemx.com/wp-includes/js/comment-reply.min.js?ver=7.0"></script> <script id="yay-currency-callback-general-js-extra"> var yay_callback_data = {"admin_url":"https://fivemx.com/wp-admin/admin.php?page=wc-settings","ajaxurl":"https://fivemx.com/wp-admin/admin-ajax.php","nonce":"f9c3807d13","isShowOnMenu":"0","isPolylangCompatible":"0","isDisplayFlagInSwitcher":"1","yayCurrencyPluginURL":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/","converted_currency":[{"ID":174768,"currency":"USD","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"1","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"$"},{"ID":174769,"currency":"EUR","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.878","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"€"},{"ID":174770,"currency":"GBP","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.7577","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"£"}],"checkout_diff_currency":"1","fallback_currency_code":"USD","default_currency_code":"USD","currency_symbol_position":"left","formatted_price_woo_blocks":"yes","fixed_product_price_enable":"0","show_approximate_price":"yes","cart_page":"","cookie_lifetime_days":"30","hide_dropdown_switcher":"","cookie_name":"yay_currency_widget","cookie_switcher_name":"yay_currency_do_change_switcher","cache_compatible":"1","current_theme":"blocksy","flag_fallbacks":{"default":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/assets/flags/default.svg"},"apply_currency_before_cache":{"ID":174768,"rateFee":1},"minicart_contents_class":"a.cart-contents"}; //# sourceURL=yay-currency-callback-general-js-extra </script> <script id="yay-currency-callback-general-js" defer src="https://fivemx.com/wp-content/plugins/yaycurrency-pro/src/helpers/general.helper.min.js?ver=3.3.4"></script> <script id="yay-currency-callback-blocks-js-extra"> var yay_callback_data = {"admin_url":"https://fivemx.com/wp-admin/admin.php?page=wc-settings","ajaxurl":"https://fivemx.com/wp-admin/admin-ajax.php","nonce":"f9c3807d13","isShowOnMenu":"0","isPolylangCompatible":"0","isDisplayFlagInSwitcher":"1","yayCurrencyPluginURL":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/","converted_currency":[{"ID":174768,"currency":"USD","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"1","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"$"},{"ID":174769,"currency":"EUR","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.878","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"€"},{"ID":174770,"currency":"GBP","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.7577","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"£"}],"checkout_diff_currency":"1","fallback_currency_code":"USD","default_currency_code":"USD","currency_symbol_position":"left","formatted_price_woo_blocks":"yes","fixed_product_price_enable":"0","show_approximate_price":"yes","cart_page":"","cookie_lifetime_days":"30","hide_dropdown_switcher":"","cookie_name":"yay_currency_widget","cookie_switcher_name":"yay_currency_do_change_switcher","cache_compatible":"1","current_theme":"blocksy","flag_fallbacks":{"default":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/assets/flags/default.svg"},"apply_currency_before_cache":{"ID":174768,"rateFee":1},"minicart_contents_class":"a.cart-contents"}; //# sourceURL=yay-currency-callback-blocks-js-extra </script> <script id="yay-currency-callback-blocks-js" defer src="https://fivemx.com/wp-content/plugins/yaycurrency-pro/src/helpers/blocks.helper.min.js?ver=3.3.4"></script> <script id="yay-currency-frontend-script-js-extra"> var yayCurrency = {"admin_url":"https://fivemx.com/wp-admin/admin.php?page=wc-settings","ajaxurl":"https://fivemx.com/wp-admin/admin-ajax.php","nonce":"f9c3807d13","isShowOnMenu":"0","isPolylangCompatible":"0","isDisplayFlagInSwitcher":"1","yayCurrencyPluginURL":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/","converted_currency":[{"ID":174768,"currency":"USD","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"1","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"$"},{"ID":174769,"currency":"EUR","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.878","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"€"},{"ID":174770,"currency":"GBP","currencyPosition":"left","currencyCodePosition":"not_display","thousandSeparator":",","decimalSeparator":".","numberDecimal":"2","roundingType":"disabled","roundingValue":"1","subtractAmount":"0","rate":"0.7577","fee":{"value":"0","type":"fixed"},"status":"1","paymentMethods":["all"],"countries":["default"],"symbol":"£"}],"checkout_diff_currency":"1","fallback_currency_code":"USD","default_currency_code":"USD","currency_symbol_position":"left","formatted_price_woo_blocks":"yes","fixed_product_price_enable":"0","show_approximate_price":"yes","cart_page":"","cookie_lifetime_days":"30","hide_dropdown_switcher":"","cookie_name":"yay_currency_widget","cookie_switcher_name":"yay_currency_do_change_switcher","cache_compatible":"1","current_theme":"blocksy","flag_fallbacks":{"default":"https://fivemx.com/wp-content/plugins/yaycurrency-pro/assets/flags/default.svg"},"apply_currency_before_cache":{"ID":174768,"rateFee":1}}; //# sourceURL=yay-currency-frontend-script-js-extra </script> <script id="yay-currency-frontend-script-js" defer src="https://fivemx.com/wp-content/plugins/yaycurrency-pro/src/script.min.js?ver=3.3.4"></script> <script id="yay-currency-third-party-js" defer src="https://fivemx.com/wp-content/plugins/yaycurrency-pro/src/compatibles/third-party.min.js?ver=3.3.4"></script> <script id="yay-currency-caching-script-js-extra"> var yay_currency_caching_data = {"ajax_url":"https://fivemx.com/wp-admin/admin-ajax.php","nonce":"01e8328039","rest_url":"https://fivemx.com/es/wp-json/yaycurrency/v1/caching","rest_nonce":"f0274f5897","should_refresh_fragment":"yes","yay_currency_current_url":"https://fivemx.com/es/?p=184927&query-0-page=2"}; //# sourceURL=yay-currency-caching-script-js-extra </script> <script id="yay-currency-caching-script-js" defer src="https://fivemx.com/wp-content/plugins/yaycurrency-pro/src/compatibles/cache/yay-caching.min.js?ver=3.3.4"></script> <script id="enlighterjs-js" src="https://fivemx.com/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=eQazT5C2%2FIg515i"></script> <script id="enlighterjs-js-after"> !function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":true,"theme":"atomic","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console); //# sourceURL=enlighterjs-js-after </script> <div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;"><p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden data-no-translation="" data-trp-gettext="">Avisos</p><div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div><div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div></div> <script id="fivemx-plausible-woocommerce-events"> (function(config) { if (!window.plausible || window.fivemxPlausibleWooLoaded) return; window.fivemxPlausibleWooLoaded = true; function track(name, props, revenue) { var options = {}; if (props) options.props = props; if (revenue) { options.revenue = revenue; } window.plausible(name, options); } function revenue(amount, currency) { amount = Number(amount || 0); if (!amount || amount <= 0) return null; return { amount: amount.toFixed(2), currency: currency || 'USD' }; } function rememberOnce(key) { try { if (sessionStorage.getItem(key)) return false; sessionStorage.setItem(key, '1'); } catch (error) { // Continue without storage-based deduping when the browser blocks it. } try { if (localStorage.getItem(key)) return false; localStorage.setItem(key, '1'); } catch (error) { return true; } return true; } var recentEvents = {}; function rememberRecently(key, ttl) { var now = Date.now(); if (recentEvents[key] && now - recentEvents[key] < ttl) return false; recentEvents[key] = now; return true; } function cleanProperty(value, fallback) { value = String(value || fallback || '').trim().replace(/\s+/g, ' '); return value.slice(0, 120); } function productProps(product) { product = product || {}; var props = { product_id: String(product.product_id || ''), product_name: String(product.product_name || '') }; if (product.category) props.category = String(product.category); if (typeof product.price !== 'undefined') props.price = Number(product.price || 0); return props; } document.addEventListener('click', function(event) { var link = event.target && event.target.closest ? event.target.closest('[data-fivemx-shop-bridge]') : null; if (!link) return; var href = link.getAttribute('href') || ''; var label = link.getAttribute('data-fivemx-bridge-label') || link.textContent || ''; var target = link.getAttribute('data-fivemx-bridge-target') || href; var key = 'shop_bridge_' + location.pathname + '_' + target; if (!rememberRecently(key, 1500)) return; track('Shop Bridge Click', { bridge_label: cleanProperty(label, 'unknown'), bridge_target: cleanProperty(target, href), source_path: cleanProperty(location.pathname, '/') }); }, true); if (config.is_product && config.product && config.product.product_id) { var p = config.product; track('Product View', productProps(p)); } if (config.is_checkout && !config.is_order_received && config.cart_count > 0) { var checkoutKey = 'fivemx_plausible_checkout_start_' + location.pathname + '_' + String(config.cart_count) + '_' + String(config.cart_total); if (rememberOnce(checkoutKey)) { track('Checkout Start', { item_count: Number(config.cart_count || 0), currency: config.currency || 'USD' }); } } if (config.is_order_received && config.order && config.order.id) { var purchaseKey = 'fivemx_plausible_purchase_' + config.order.id; if (rememberOnce(purchaseKey)) { var purchaseProps = { order_id: String(config.order.id || ''), currency: config.order.currency || 'USD', item_count: Number(config.order.item_count || 0), status: String(config.order.status || '') }; track('Purchase', purchaseProps, revenue(config.order.total, config.order.currency)); } } function trackAddToCart(product) { product = product || config.product || {}; var props = productProps(product); if (!props.product_id && !props.product_name) return; props.currency = product.currency || config.currency || 'USD'; var key = 'add_to_cart_' + (props.product_id || props.product_name || 'unknown') + '_' + location.pathname; if (!rememberRecently(key, 3000)) return; track('Add to Cart', props); } document.addEventListener('submit', function(event) { var form = event.target; if (!form || !form.matches || !form.matches('form.cart')) return; trackAddToCart(config.product); }, true); if (window.jQuery) { window.jQuery(document.body).on('added_to_cart', function(event, fragments, cartHash, button) { var product = Object.assign({}, config.product || {}); var $button = window.jQuery(button || []); var id = $button.data('product_id'); if (id) product.product_id = String(id); trackAddToCart(product); }); } })({"is_product":false,"is_checkout":false,"is_order_received":false,"currency":"USD","cart_total":0,"cart_count":0,"product":[],"order":null}); </script> </body> </html> <!-- Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com -->