LogoObsidian

Loading

A modal multi-stage initialization handler with optional sidebar support.

Loading

The Loading GUI is a specialized modal overlay designed to manage multi-stage script initialization. It provides a centered loading interface with a progress bar and an optional sidebar for showing information or interactive elements.

Usage

Create a loading instance with Library:CreateLoading():

local Loading = Library:CreateLoading({
    Title = "mspaint",
    Icon = 95816097006870,
    TotalSteps = 4
})
 
-- Loading...
Loading:SetMessage("Initializing...")
Loading:SetDescription("Waiting for game to load...")
task.wait(1)
 
Loading:SetCurrentStep(1)
Loading:SetDescription("Loading configuration...")
task.wait(1)
 
-- Show sidebar with information
Loading:SetCurrentStep(2)
Loading:ShowSidebarPage(true)
Loading.Sidebar:AddLabel("User: " .. game.Players.LocalPlayer.Name)
Loading.Sidebar:AddLabel("Version: v1.0.0")
task.wait(1)
 
Loading:SetCurrentStep(3)
Loading:SetDescription("Ready to start!")
task.wait(1)
 
Loading:SetCurrentStep(4)
Loading:Continue() -- Destroys the loader and opens the main window

Configuration

Prop

Type

Methods

SetMessage

Updates the primary status message.

Loading:SetMessage("Loading...")

SetDescription

Updates the secondary descriptive text.

Loading:SetDescription("Connecting to server...")

SetCurrentStep

Updates the progress bar and step counter.

Loading:SetCurrentStep(5)

SetTotalSteps

Updates the total steps needed.

Loading:SetTotalSteps(20)

SetLoadingIcon

Switches the central rotating icon.

Loading:SetLoadingIcon("info") -- Lucide icon or roblox asset

SetLoadingIconTweenTime

Updates the rotation tween time. Setting this to 0 stops rotation of the loading icom.

Loading:SetLoadingIconTweenTime(2)

SetLoadingIconColor

Dynamically updates the color of the loading icon.

Loading:SetLoadingIconColor(Color3.new(1, 0, 0))

ShowSidebarPage

Toggles the visibility of the sidebar.

Loading:ShowSidebarPage(true)

ShowErrorPage

Switches to the error state view.

Loading:ShowErrorPage(true)

SetErrorMessage

Updates the text on the error screen.

Loading:SetErrorMessage("Failed to authenticate.")

SetErrorButtons

Replaces the buttons on the error screen. (same layout as the FooterButtons in Modals)

Loading:SetErrorButtons({
    Retry = {
        Title = "Retry Connection",
        Variant = "Primary",
        Callback = function() -- logic end
    }
})

Destroy

Closes the loader. If CreateWindow was already called, this will restore the main window's visibility.

Loading:Destroy()

Continue

Alias for Destroy().

Loading:Continue()

The Loading.Sidebar frame works like a groupbox. You are able to use every UI element inside the sidebar.

Loading.Sidebar:AddLabel("Version: 1.2.0")
Loading.Sidebar:AddButton("Print Hello World", function() print("Hello World") end)

Previous

ThemeManager

Next

Window

On this page