Loading UI

Step 1: You need to remember to change the width of the process picture to 0

Step 2: Also, you need to remember the first width of the process picture

local loading_picture = nil
local ratio = nil
local the_first_width_value = nil
-- Define the game function to update the UI
function game(obj)
  	repeat
      -- Set the size of the UI element
      Customui:setSize(obj.eventobjid, loading_picture[1], loading_picture[2], width_value, 86)
-- Increment the width value by a random number between 0 and 5
      width_value = width_value + math.random(6)
      --Calculate the percentage of the current width relative to the initial width
      local percentage = (width_value / the_first_width_value) * 100
      -- Set the text with the calculated percentage (formatted with no decimal places)
      Customui:setText(obj.eventobjid, ratio[1], ratio[2], string.format("%.0f%%", percentage))
      -- Wait for 0.01 seconds before the next iteration
      Trigger:wait(0.01)
      -- If the width value exceeds the initial width, set it to the initial width
      if width_value > the_first_width_value then
          width_value = the_first_width_value
      end
  	-- Repeat until the width value reaches the initial width
  	until width_value == the_first_width_value
end
-- Register the game function to be triggered when the UI is shown
ScriptSupportEvent:registerEvent("UI.Show", game)

local loading_picture = nil
local ratio = nil
local the_first_width_value = nil
loading_picture = nil -- Replace with your picture IDs
ratio = nil -- Replace with your ratio IDs

These lines initialize some variables:

• loading_picture: Holds identifiers for UI elements related to the loading picture.
• ratio: Holds identifiers for UI elements related to displaying the percentage.
• the_first_width_value: Stores the initial width value of the loading bar.

function game(obj)
  		repeat
      	-- Set the size of the UI element
      Customui:setSize(obj.eventobjid, loading_picture[1], loading_picture[2], width_value, 86)

• game(obj): A function that runs when a specific event (UI showing) occurs.
• repeat: Starts a loop that will run until the specified condition is met.
• Customui:setSize: Sets the size of the UI element (loading_picture). The parameters are:
• obj.eventobjid: The ID of the object triggering the event.
• loading_picture[1]: The first identifier for the loading picture.
• loading_picture[2]: The second identifier for the loading picture.
• width_value: The current width of the loading bar.
• 86: A fixed height for the loading bar.

      	-- Increment the width value by a random number between 0 and 5
      width_value = width_value + math.random(6)

• math.random(6): Generates a random number between 0 and 5 and adds it to width_value.

      	-- Calculate the percentage of the current width relative to the initial width
      local percentage = (width_value / the_first_width_value) * 100
      -- Set the text with the calculated percentage (formatted with no decimal places)
      Customui:setText(obj.eventobjid, ratio[1], ratio[2], string.format("%.0f%%", percentage))

• Calculates the percentage that width_value represents of the_first_width_value.
• Customui:setText: Sets the text of the UI element (ratio) to display the percentage.
• obj.eventobjid: The ID of the object triggering the event.
• ratio[1]: The first identifier for the ratio text.
• ratio[2]: The second identifier for the ratio text.

      	-- Wait for 0.01 seconds before the next iteration
      Trigger:wait(0.01)
      -- If the width value exceeds the initial width, set it to the initial width
      if width_value > the_first_width_value then
          width_value = the_first_width_value
      end
  -- Repeat until the width value reaches the initial width
  until width_value == the_first_width_value
end

• Trigger:wait(0.01): Pauses the loop for 0.01 seconds.
• Checks if width_value exceeds the_first_width_value and if so, resets width_value to the_first_width_value.
• The until loop condition ensures the loop runs until width_value equals the_first_width_value.
• Registering the Game Function

ScriptSupportEvent:registerEvent("UI.Show", game)

ScriptSupportEvent:registerEvent(“UI.Show”, game): Registers the game function to be called when the UI.Show event occurs.

This script initializes variables and defines a function (game) that simulates a loading bar increasing over time by updating the width and percentage text of UI elements. The function runs in a loop, increasing the width incrementally until it reaches a specified initial width. The function is triggered by the UI.Show event.